php+js实现百度地图多点标注的方法
程序员文章站
2024-04-01 22:50:16
本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考,具体如下:
1.php创建json数据
$products = $this-&g...
本文实例讲述了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程序设计有所帮助。
上一篇: php获取文件后缀的9种方法