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

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

1.php创建json数据

?

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

2.js传入json数据

类似于这样的结构

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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数据

?

1 2 3 4 5

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

3.处理地图

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

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(); }

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php curl用法总结》、《PHP数组(Array)操作技巧大全》、《php排序算法总结》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP数学运算技巧总结》、《php正则表达式用法总结》、《PHP运算与运算符用法总结》、《php字符串(string)用法总结》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。