php+js实现百度地图多点标注的方法

本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考，具体如下：1.p

本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考，具体如下：

1.php创建json数据

$products = $this->product_db->select($where);
$products_json = json_encode($products);

2.js传入json数据

类似于这样的结构

var markerArr = [{
 title: "名称：广州火车站",
 point: "113.264531,23.157003",
 address: "广东省广州市广州火车站",
 tel: "12306"
}, {
 title: "名称：广州塔（赤岗塔）",
 point: "113.330934,23.113401",
 address: "广东省广州市广州塔（赤岗塔） ",
 tel: "18500000000"
}, {
 title: "名称：广州动物园",
 point: "113.312213,23.147267",
 address: "广东省广州市广州动物园",
 tel: "18500000000"
}, {
 title: "名称：天河公园",
 point: "113.372867,23.134274",
 address: "广东省广州市天河公园",
 tel: "18500000000"
}];

js擅长处理json数据

<script>
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,'宿迁');
</script>

3.处理地图

document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>');
function citymap(markerArr, cityName){
 this.markerArr = markerArr;
 this.cityName = cityName;
 this.initMap = function() {
 this.createMap();//创建地图
 this.setMapEvent();//设置地图事件
 this.addMapControl();//向地图添加控件
 };
 this.createMap = function() {
 var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
 map.centerAndZoom(cityName,'13');
 window.map = map;//将map变量存储在全局
 // 绘制点
 for (var i = 0; i < markerArr.length; i++) {
 var p0 = markerArr[i].baidu_lng;
 var p1 = markerArr[i].baidu_lat;
 var maker = this.addMarker(new window.BMap.Point(p0, p1),markerArr[i],i );
 this.addInfoWindow(maker, markerArr[i], i);
 }
 };
 this.addMarker = function(point,pro,index) {
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
 new BMap.Size(23, 25), {
 offset: new BMap.Size(10, 25),
 imageOffset: new BMap.Size(0, 0 - index * 25)
 });
 var marker = new BMap.Marker(point, {
 icon: myIcon
 });
 map.addOverlay(marker);
 var label = new BMap.Label(pro.name,{offset:new BMap.Size(20,-10)});
 // 设置label样式
 label.setStyle({ 
 color : "#CC3333", 
 fontSize : "13px", 
 backgroundColor :"#CCFFFF",
 border :"0", 
 fontWeight :"bold" 
 });
 marker.setLabel(label);
 return marker;
 };
 this.addInfoWindow = function(marker,pro) {
 //pop弹窗标题 
 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></div>';
 //pop弹窗信息 
 var html = [];
 html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
 html.push('<tr>');
 html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
 html.push('<td style="vertical-align:top;line-height:16px">' + pro.address + ' </td>');
 html.push('</tr>');
 html.push('</tbody></table>');
 var infoWindow = new BMap.InfoWindow(html.join(""), {
 title: title,
 width: 200
 });
 var openInfoWinFun = function() {
 marker.openInfoWindow(infoWindow);
 };
 marker.addEventListener("click", openInfoWinFun);
 return openInfoWinFun;
 }
 this.setMapEvent = function() {
 map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
 // map.enableScrollWheelZoom();//启用地图滚轮放大缩小
 map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
 map.enableKeyboard();//启用键盘上下左右键移动地图
 };
 this.addMapControl = function() {
 //向地图中添加缩放控件
 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
 map.addControl(ctrl_nav);
 //向地图中添加缩略图控件
 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
 map.addControl(ctrl_ove);
 //向地图中添加比例尺控件
 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
 map.addControl(ctrl_sca);
 };
 this.initMap();
}