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

php  /  管理员 发布于 7年前   215

本文实例讲述了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数据

3.处理地图

document.write('');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 = '
' + pro.name + '';    //pop弹窗信息     var html = [];    html.push('');    html.push('');    html.push('');    html.push('');    html.push('');    html.push('
地址:
' + pro.address + ' 
');    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使用GeoIP库实例
• php GeoIP的使用教程
• PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
• PHP计算百度地图两个GPS坐标之间距离的方法
• php实现计算百度地图坐标之间距离的方法
• php使用google地图应用实例
• 定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
• php读取qqwry.dat ip地址定位文件的类实例代码
• PHP进阶学习之Geo的地图定位算法详解