宜宾网站建设公司

php+js如何实现百度地图多点标注-创新互联

这篇文章主要介绍了php+js如何实现百度地图多点标注，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站设计、网站建设、外贸网站建设收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十载的创新互联建站网站建设公司。

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

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('' + pro.address + ' ');     html.push('');     html.push('');     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如何实现百度地图多点标注”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!


分享标题：php+js如何实现百度地图多点标注-创新互联
分享网址：http://hbruida.cn/article/djsgod.html

其他资讯