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

本文实例讲述了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（）;}

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