php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注

這篇文章主要介紹了php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

本文實(shí)例講述了php+js實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注的方法。分享給大家供大家參考，具體如下：

1.php創(chuàng)建json數(shù)據(jù)

$products = $this->product_db->select($where);
$products_json = json_encode($products);

2.js傳入json數(shù)據(jù)

類似于這樣的結(jié)構(gòu)

var markerArr = [{
  title: "名稱：廣州火車(chē)站",
  point: "113.264531,23.157003",
  address: "廣東省廣州市廣州火車(chē)站",
  tel: "12306"
}, {
  title: "名稱：廣州塔（赤崗塔）",
  point: "113.330934,23.113401",
  address: "廣東省廣州市廣州塔（赤崗塔） ",
  tel: "18500000000"
}, {
  title: "名稱：廣州動(dòng)物園",
  point: "113.312213,23.147267",
  address: "廣東省廣州市廣州動(dòng)物園",
  tel: "18500000000"
}, {
  title: "名稱：天河公園",
  point: "113.372867,23.134274",
  address: "廣東省廣州市天河公園",
  tel: "18500000000"
}];

js擅長(zhǎng)處理json數(shù)據(jù)

<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();//創(chuàng)建地圖
    this.setMapEvent();//設(shè)置地圖事件
    this.addMapControl();//向地圖添加控件
  };
  this.createMap = function() {
    var map = new BMap.Map("dituContent");//在百度地圖容器中創(chuàng)建一個(gè)地圖
    map.centerAndZoom(cityName,'13');
    window.map = map;//將map變量存儲(chǔ)在全局
    // 繪制點(diǎn)
    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)});
    // 設(shè)置label樣式
    label.setStyle({ 
      color : "#CC3333", 
      fontSize : "13px", 
      backgroundColor :"#CCFFFF",
      border :"0", 
      fontWeight :"bold" 
    });
    marker.setLabel(label);
    return marker;
  };
  this.addInfoWindow = function(marker,pro) {
    //pop彈窗標(biāo)題 
    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();//啟用地圖拖拽事件，默認(rèn)啟用(可不寫(xiě))
    // map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
    map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫(xiě))
    map.enableKeyboard();//啟用鍵盤(pán)上下左右鍵移動(dòng)地圖
  };
  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();
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!