這篇文章主要介紹了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 + '