如何结合自己本地数据库，使用【百度地图】API
如何结合自己本地数据库，使用【百度地图】API
百度地图使用越来越多，官网上的示例数据都是写死的，实际上我们的开发中的数据都是从数据库中取出来的，最近看了很多大神的文章，结合自己本地数据库使用百度地图API，这里来总结一下具体的代码。
本示例中，实现了将数据库里的位置信息显示在地图中，还实现了基本的搜索功能。
这里需要用到：请将这些库提前准备好放到文件中
jquery.min.js
与后台交互：Ajax 技术
另外用到：MySQL+PHP (没有基础也没事，后面附有)
注意使用前先到官网申请秘钥
实例文件目录为：
|-config
|-conn.php 连接数据库
|-search_action.php 实现文本框搜索
|-css
|-app.css
|-js
|-index.js Ajax与后台交互代码
|-jquery.min.js
|-header.php 将公共的头部信息分出来
|-index.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代码为：
1 *{
2 padding: 0;
3 margin: 0;
4 }
5
6 #container {
7 float:left;
8 width:800px;
9 height:500px;
10 border:1px solid gray;
11 display: block;
12 }
13
14 .search_box {
15 position: relative;
16 width: 500px;
17 float: right;
18 }
19 #search{
20 border: 1px solid #ccc;
21 width:220px;
22 height:25px;
23 text-indent:3px;
24 }
25 .search_results {
26 border: 1px solid #ccc;
27 height: auto;
28 max-height: 200px;
29 overflow-y: scroll;
30 width: 220px;
31 position: relative;
32 display: none;
33 }
34
35 .search_results > li {
36 color: #333;
37 font-size: 14px;
38 height: 30px;
39 line-height: 30px;
40 list-style: outside none none;
41 text-indent: 10px;
42 }
43 .search_results > li:hover {
44 background: #f2f2f2;
45 }
46 .search_results a {
47 text-decoration: none;
48 color: #333;
49 }
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 的代码为：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <link rel="stylesheet" type="text/css" href="css/app.css">
7 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW"></script>
8 <!-- 控制区域显示js -->
9 <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
10
11 </head>
12 <body>
7. 获取查询结果，对获取结果进行处理，这里1.创建坐标，2.创建标注，3.将标注添加到地图中，4.自定义窗口信息，5.创建窗口对象，6.为创建的标注绑定mouseover事件。
index.php 的代码为：
1 <? include ('header.php') ?>
2 <div id="container"></div>
3 <div class="search_box">
4 <form method="post">
5 <div>输入搜索的内容:</div><input type="text" id="search" name="topic" autocomplete="off" placeholder="请输入序号，地址，或名称查询">
6 </form>
7 <ul class="search_results"></ul>
8 </div>
9
10 <? include ('config/conn.php') ?>
11 <?php
12 $strsql="select * from myMap" ;
13 $result = $conn->query($strsql);
14
15 // 获取查询结果
16 $arr_point = '[';
17 $maker = '';
18 $addverlay='';
19 $ops = '';
20 $infoWindow='';
21 $addEventListener='';
22 $i = 0;
23 // $addverlay = ''; //修改php.ini的error_reporting = E_ALL为error_reporting = E_ALL & ~E_NOTICE
24
25 while ($row = $result->fetch_assoc()) {
26 $img = '';
27
28 //1.从数据库中获取坐标，创建地图上的坐标点，并把它放到数组里
29 $arr_point .= 'new BMap.Point('.$row["point"].'),';
30
31 //2.利用这些坐标点创建标注mark1-mark9,将标注都存放到变量$mark中
32 $maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.']);';
33
34 //3.将标注添加到地图中
35 $addverlay .= 'map.addOverlay(marker'.$i.');';
36 for($m = 0;$m < $row["level"];$m++){
37 $img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";
38 }
39
40 //4.信息窗口的标题，记住，要先定义opts，再定义信息窗口
41 $ops .= 'var opts'.$i.' = {title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';
42
43 //5.创建信息窗口对象，信息窗口接收两个参数，第一个并指信息窗口的内容，第二个指上面定义的opts. 信息窗口里支持任意的htm代码
44 $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.");";
45
46 //6.给每一个标注添加mouseover事件
47 $addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
48 $i++;
49 }
50 $arr_point .= substr($arr_point , 0 , -1).']]';
51 ?>
52 <script type="text/javascript">
53 var map = new BMap.Map("container"); // 创建Map实例
54 var point = new BMap.Point(116.404, 39.915); //创建中心点坐标
55 map.centerAndZoom(point, 14); //初始化地图,设置中心点坐标和地图级别
56
57 function openMyWin(id,p){
58 map.openInfoWindow(id,p);
59 }
60 </script>
61
62 <!-- 定义好信息后，需要把js用php语句拼起来 -->
63 <?php
64 echo '<script> var point = '.$arr_point.';'; //坐标点
65 echo $maker; //创建标注
66 echo $addverlay; //将标注添加到地图中
67 echo 'map.setViewport(point); '; // 调整地图的最佳视野为显示标注数组point
68 echo $ops;
69 echo $infoWindow ;
70 echo $addEventListener.' </script> '
71 ?>
72 <script type="text/javascript" src="js/jquery.2.1.1.min.js"></script>
73 <!-- 文本框搜索交互代码 -->
74 <script type="text/javascript" src="js/index.js"></script>
75 </body>
76 </html>
8.下面是文本框的搜索：
编写的ajax交互代码放到 js/index.js里面，代码如下：
1 $(function(){
2 $('#search').val('');
3 $(window).click(function(event) {
4 $('.search_results').css('display','none');
5 });
6 $('#search, .search_results li').click(function(e) {
7 e.stopPropagation();
8 });
9 $('#search').keyup(function(event) {
10 event.stopPropagation();
11 $.ajax({
12 url: 'config/search_action.php',
13 type: 'post',
14 data: $("form").serialize(),
15 success: function(responseText,status,xhr){
16 console.log(responseText);
17 if (responseText != ''){
18 $('.search_results').css('display','block');
19 $('.search_results').html(responseText);
20 } else {
21 $('.search_results').html("<li>没有搜索到</li>");
22 }
23
24 }
25 })
26 .done(function() {
27 console.log("success");
28 })
29 .fail(function() {
30 console.log("error");
31 })
32 .always(function() {
33 console.log("complete");
34 });
35 ;
36 });
37 });
9.请求的后台文件为config/search_action.php，代码为：
1 <? include ('conn.php') ?>
2 <?
3 $subject = $_POST['topic'];
4 if ($subject != ''){
5 $search_sql = "select * from y_map where (id like '%" .$subject. "%') or (title like '%" .$subject. "%') or (address like '%" .$subject. "%') order by id,title,address";
6 $search_result = mysqli_query($conn, $search_sql);
7 while ($row = $search_result->fetch_assoc()) {
8 echo '<li onmouseover="openMyWin(infoWindow'.$row["id"].',point['.$row["id"].'])" >
9 <a href="#">'.$row['title'].'</a>
10 </li>';
11 }
12 } else {
13 echo "none result";
14 }
15 ?>
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);
