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 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程序设计有所帮助。