如何结合自己本地数据库，使用【百度地图】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代码为：
*{
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);