您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了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 ><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" ><tbody>'); html.push('<tr>'); html.push('<td >地址:</td>'); html.push('<td >' + 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+js如何实现百度地图多点标注”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。