如何结合自己本地数据库，使用【百度地图】API

如何结合自己本地数据库，使用【百度地图】API

百度地图使用越来越多，官网上的示例数据都是写死的，实际上我们的开发中的数据都是从数据库中取出来的，最近看了很多大神的文章，结合自己本地数据库使用百度地图API，这里来总结一下具体的代码。
本示例中，实现了将数据库里的位置信息显示在地图中，还实现了基本的搜索功能。

这里需要用到：请将这些库提前准备好放到文件中
jquery.min.js
与后台交互：Ajax 技术
另外用到：MySQL+PHP (没有基础也没事，后面附有)
注意使用前先到官网申请秘钥

1.创建数据库，SQL语句：
    create database map CHARSET=utf8;
    use map;
2.创建表格，SQL语句：
CREATE TABLE IF NOT EXISTS `myMap` (
    `id` int(11) NOT NULL,
    `point` varchar(128) NOT NULL,
    `title` varchar(128) NOT NULL,
    `address` varchar(128) NOT NULL,
    `price` float NOT NULL,
    `tel` varchar(20) NOT NULL,
    `level` int(11) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

可以利用百度地图提供的坐标拾捡工具：http://api.map.baidu.com/lbsapi/getpoint/
获取坐标。
3.插入数据：
这里我们准备了10条自己的数据，id是按顺序插入的

SQL语句：
    INSERT INTO `myMap` (`id`, `point`, `title`, `address`, `price`, `tel`, `level`) VALUES
    (0, '116.411776,39.942833', '如家快捷酒店', '北京市朝阳区高碑店小学旁', 120, '010-59921010', 5),
    (1, '116.320791,40.003682', '昆仑大厦', '北京市海淀区紫竹院123号', 2370, '010-59921010', 4),
    (2, '116.275186,39.896095', '华夏银行', '北京市海淀区紫竹院123号', 50, '010-59921010', 4),
    (3, '116.425098,39.946249', '成都小吃', '北京市海淀区紫竹院123号', 16, '010-59921010', 4),
    (4, '116.359823,39.984761', '锦绣大饭店', '北京市朝阳区高碑店小学旁', 300, '010-59921010', 5),
    (5, '116.316479,39.98323', '七天快捷酒店', '北京市大钟寺沧澜大厦', 180, '010-59921010', 5),
    (6, '116.385986,39.946124', '中央民族大学', '北京市朝阳区高碑店小学旁', 9, '010-59921010', 3),
    (7, '116.427545,40.00796', '昌平汽车专修学院', '北京市哇哈哈路鲜鱼一条街', 3300, '010-59921010', 3),
    (8, '116.446965,39.911603', '百度大厦', '北京市朝阳区高碑店小学旁', 20, '010-59921010', 3),
    (9, '116.454579,39.946652', '海尔电器销售点', '北京市朝阳区高碑店小学旁', 1000, '010-59921010', 3);

4.css/app.css代码为：

 *{

     padding:;

     margin:;

   }

   #container {

     float:left;

     width:800px;

     height:500px;

     border:1px solid gray;

     display: block;

   }

   .search_box {

     position: relative;

     width: 500px;

     float: right;

   }

   #search{

       border: 1px solid #ccc;

       width:220px;

       height:25px;

       text-indent:3px;

   }

   .search_results {

     border: 1px solid #ccc;

     height: auto;

     max-height: 200px;

     overflow-y: scroll;

     width: 220px;

     position: relative;

     display: none;

   }

   .search_results > li {

       color: #333;

       font-size: 14px;

       height: 30px;

       line-height: 30px;

       list-style: outside none none;

       text-indent: 10px;

   }

   .search_results > li:hover {

     background: #f2f2f2;

   }

   .search_results a {

       text-decoration: none;

       color: #333;

   }

5.连接数据库，查询数据，config/conn.php代码为：
    <?
        // 连接到数据库
        $conn = new mysqli("localhost", "root","","map")
                or die("Could not connect: ".mysql_error());
        mysqli_query($conn,"set names 'utf8'");
    ?>

6. header.php 的代码为：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" type="text/css" href="css/app.css">

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW"></script>

     <!-- 控制区域显示js -->

     <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

 </head>

 <body>

7. 获取查询结果，对获取结果进行处理，这里1.创建坐标，2.创建标注，3.将标注添加到地图中，4.自定义窗口信息，5.创建窗口对象，6.为创建的标注绑定mouseover事件。
index.php 的代码为：

 <? include ('header.php') ?>

       <div id="container"></div>

       <div class="search_box">

           <form method="post">

               <div>输入搜索的内容:</div><input type="text" id="search" name="topic" autocomplete="off" placeholder="请输入序号，地址，或名称查询">

           </form>

           <ul class="search_results"></ul>

       </div>

       <? include ('config/conn.php') ?>

       <?php

         $strsql="select * from myMap" ;

         $result = $conn->query($strsql);

         // 获取查询结果

         $arr_point = '[';

         $maker = '';

           $addverlay='';

         $ops = '';

           $infoWindow='';

           $addEventListener='';

         $i = 0;

         // $addverlay = ''; //修改php.ini的error_reporting = E_ALL为error_reporting = E_ALL & ~E_NOTICE

         while ($row = $result->fetch_assoc()) {

           $img = '';

               //1.从数据库中获取坐标，创建地图上的坐标点，并把它放到数组里

           $arr_point .= 'new BMap.Point('.$row["point"].'),';

               //2.利用这些坐标点创建标注mark1-mark9,将标注都存放到变量$mark中

           $maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.']);';

               //3.将标注添加到地图中

           $addverlay .= 'map.addOverlay(marker'.$i.');';

               for($m = 0;$m < $row["level"];$m++){

             $img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";

           }

               //4.信息窗口的标题，记住，要先定义opts，再定义信息窗口

           $ops .= 'var opts'.$i.' = {title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';

               //5.创建信息窗口对象，信息窗口接收两个参数，第一个并指信息窗口的内容，第二个指上面定义的opts. 信息窗口里支持任意的htm代码

           $infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>010-59921010</br><b>口碑：</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>\", opts".$i.");";

               //6.给每一个标注添加mouseover事件

           $addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';

           $i++;

         }

         $arr_point .= substr($arr_point , 0 , -1).']]';

       ?>

       <script type="text/javascript">

           var map = new BMap.Map("container");    // 创建Map实例

           var point = new BMap.Point(116.404, 39.915);    //创建中心点坐标

           map.centerAndZoom(point, 14);    //初始化地图,设置中心点坐标和地图级别

           function openMyWin(id,p){

               map.openInfoWindow(id,p);

           }

       </script>

       <!-- 定义好信息后，需要把js用php语句拼起来 -->

       <?php

           echo '<script> var point = '.$arr_point.';';    //坐标点

           echo $maker;                                   //创建标注

           echo $addverlay;                             //将标注添加到地图中

           echo 'map.setViewport(point); ';           // 调整地图的最佳视野为显示标注数组point

           echo $ops;

           echo $infoWindow ;

           echo $addEventListener.' </script> '

       ?>

       <script type="text/javascript" src="js/jquery.2.1.1.min.js"></script>

           <!-- 文本框搜索交互代码 -->

       <script type="text/javascript" src="js/index.js"></script>

     </body>

     </html>

8.下面是文本框的搜索：
编写的ajax交互代码放到 js/index.js里面，代码如下：

 $(function(){

       $('#search').val('');

       $(window).click(function(event) {

         $('.search_results').css('display','none');

       });

       $('#search, .search_results li').click(function(e) {

         e.stopPropagation();

       });

       $('#search').keyup(function(event) {

         event.stopPropagation();

         $.ajax({

           url: 'config/search_action.php',

           type: 'post',

           data: $("form").serialize(),

           success: function(responseText,status,xhr){

             console.log(responseText);

             if (responseText != ''){

               $('.search_results').css('display','block');

               $('.search_results').html(responseText);

             } else {

               $('.search_results').html("<li>没有搜索到</li>");

             }

           }

         })

         .done(function() {

           console.log("success");

         })

         .fail(function() {

           console.log("error");

         })

         .always(function() {

           console.log("complete");

         });

         ;

       });

     });

9.请求的后台文件为config/search_action.php，代码为：

 <? include ('conn.php') ?>

 <?

     $subject = $_POST['topic'];

     if ($subject != ''){

         $search_sql = "select * from y_map where (id like '%" .$subject. "%') or (title like '%" .$subject. "%') or (address like '%" .$subject. "%') order by id,title,address";

         $search_result = mysqli_query($conn, $search_sql);

         while ($row = $search_result->fetch_assoc()) {

             echo '<li onmouseover="openMyWin(infoWindow'.$row["id"].',point['.$row["id"].'])" >

                             <a href="#">'.$row['title'].'</a>

                         </li>';

         }

     } else {

         echo "none result";

     }

 ?>

10.总结：
使用百度地图的基本步骤：
    1.创建地图实例：var map = new BMap.Map("container");
    2.创建中心点坐标：var point = new BMap.Point(116.404, 39.915);
    3.初始化地图,设置中心点坐标和地图级别：map.centerAndZoom(point, 14);
    5.获取坐标点：
        如： var points = [
              new BMap.Point(116.411776,39.942833),
              new BMap.Point(116.320791,40.003682)
            ];
    6.创建标注：
        如：var marker1 =new BMap.Marker(points[1]);
            var marker2 =new BMap.Marker(points[2]);
    7.将标注添加到地图中：
        如：map.addOverlay(marker1);
            map.addOverlay(marker2);
    8.调整地图的最佳视野为显示标注数组point：
        如：map.setViewport(points);

如何结合自己本地数据库，使用【百度地图】API的更多相关文章

如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...
【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！
原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...
scrapy爬虫框架调用百度地图api数据存入数据库
scrapy安装配置不在本文提及, 1.在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令 scrapy startproject mySpider 其中, my ...
吐槽贴：百度地图 api 封装的实用功能 [源码下载]
ZMap 类功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
Winform实现用多线程、百度地图API解析某公司的物理地址
前言作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...
百度地图API的IP定位城市和浏览器定位（转）
百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...
百度地图api简单使用方法
百度地图API的使用方法百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)
微信公众平台开发 - 获取用户地理位置本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...
百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

poj1753
#include <stdio.h> char s[100][100]; int s1[100][100]; int ax[5]={0,-1,0,1,0}; int ay[5]={0,0, ...
带你玩转JavaWeb开发之六-mysql基本语法详解及实例(2)
1.1.1 对数据库中表的记录进行操作(*****) 1.1.1.1 对数据库中表记录插入操作 [语法] 向数据库表中插入某些列:insert into 表名 (列名1,列名2,列名3-) ...
你应该知道的jQuery技巧 [转]
回到顶部按钮利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. $('.top').click(function (e) { e.prevent ...
Wordpress基础：安装主题和插件
一:安装主题 1.下载主题 2.解压至wordpress目录下的/wp-content/themes 3.访问后台>外观>主题启用即可二:安装插件 1.下载插件 2.解压至wordpre ...
接口测试之基于LoadRunner的一个简单示例
这几天一直在捣鼓接口测试,以下总结一下: 1.什么是接口测试:接口是指系统模块与模块之间或者系统与系统之间进行交互,一般我们用的多的是HTTP协议的接口.WebService协议的接口.还有RPC(R ...
wamp下多域名配置问题
1.找到wamp安装目录的apache安装目录找到 httpd.conf文件例如我安装的目录为 E:\wamp\bin\apache\apache2.2.8\conf\httpd.conf 也可以 ...
WP8.1 C#代码添加/获取Grid.ColumnDefinitions/RowDefinitions
WP8.1: ColumnDefinitions和RowDefinitions的道理是相同的,语法顺序是一样的,只不过是将ColumnDefinitions换成RowDefinitions而已获取并 ...
centos7 firewalld
1.firewalld简介 firewalld是centos7的一大特性,最大的好处有两个: 1.支持动态更新,不用重启服务: 2.加入了防火墙的"zone"概念 firewa ...
mysql 命令行操作1
查看版本号 :SELECT @@version;或者status; 1.设置数据库系统的事务隔离级别 mysql> set global transaction isolation level ...
主页面、iframe之间调用以及传值
主页面.iframe之间的调用和传值,无非就是两个交互形式: 主页面与子页面的交互子页面之间的交互接下来要讲的是四种交互传值的方式:利用postMessage方法传值.DOM操作传值.URL方式传 ...

如何结合自己本地数据库，使用【百度地图】API

如何结合自己本地数据库，使用【百度地图】API的更多相关文章

随机推荐

热门专题