php+js實現百度地圖多點標註

這篇文章主要介紹了php+js實現百度地圖多點標註的方法,涉及php結合js針對百度地圖介面調用與json操作相關技巧,需要的朋友可以參考下

具體如下：

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 = '<p style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></p>';    //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();}

以上就是本文的全部內容，希望對大家的學習有所協助。