本文实例讲述了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 |
varmarkerArr = [{ 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>varproducts_json = {$products_json};// 百度地图varcitymap = newcitymap(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>');functioncitymap(markerArr, cityName){ this.markerArr = markerArr; this.cityName = cityName; this.initMap = function() { this.createMap();//创建地图 this.setMapEvent();//设置地图事件 this.addMapControl();//向地图添加控件 }; this.createMap = function() { varmap = newBMap.Map("dituContent");//在百度地图容器中创建一个地图 map.centerAndZoom(cityName,'13'); window.map = map;//将map变量存储在全局 // 绘制点 for(vari = 0; i < markerArr.length; i++) { varp0 = markerArr[i].baidu_lng; varp1 = markerArr[i].baidu_lat; varmaker = this.addMarker(newwindow.BMap.Point(p0, p1),markerArr[i],i ); this.addInfoWindow(maker, markerArr[i], i); } }; this.addMarker = function(point,pro,index) { newBMap.Size(23, 25), { offset: newBMap.Size(10, 25), imageOffset: newBMap.Size(0, 0 - index * 25) }); varmarker = newBMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); varlabel = newBMap.Label(pro.name,{offset:newBMap.Size(20,-10)}); // 设置label样式 label.setStyle({ color : "#CC3333", fontSize : "13px", backgroundColor :"#CCFFFF", border :"0", fontWeight :"bold" }); marker.setLabel(label); returnmarker; }; this.addInfoWindow = function(marker,pro) { //pop弹窗标题 vartitle = '<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">'+ pro.name + '</a></div>'; //pop弹窗信息 varhtml = []; 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>'); varinfoWindow = newBMap.InfoWindow(html.join(""), { title: title, width: 200 }); varopenInfoWinFun = function() { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun); returnopenInfoWinFun; } this.setMapEvent = function() { map.enableDragging();//启用地图拖拽事件，默认启用(可不写) // map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 }; this.addMapControl = function() { //向地图中添加缩放控件 varctrl_nav = newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 varctrl_ove = newBMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 varctrl_sca = newBMap.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程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/112797.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...