欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年11月30日 08:48:11   作者：牛逼的霍嘯林  
這篇文章主要介紹了php+js實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注的方法,涉及php結(jié)合js針對(duì)百度地圖接口調(diào)用與json操作相關(guān)技巧,需要的朋友可以參考下

本文實(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ù)

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

var markerArr = [{
  title: "名稱(chēng)：廣州火車(chē)站",
  point: "113.264531,23.157003",
  address: "廣東省廣州市廣州火車(chē)站",
  tel: "12306"
}, {
  title: "名稱(chēng)：廣州塔（赤崗塔）",
  point: "113.330934,23.113401",
  address: "廣東省廣州市廣州塔（赤崗塔） ",
  tel: "18500000000"
}, {
  title: "名稱(chēng)：廣州動(dòng)物園",
  point: "113.312213,23.147267",
  address: "廣東省廣州市廣州動(dòng)物園",
  tel: "18500000000"
}, {
  title: "名稱(chēng)：天河公園",
  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 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();//啟用地圖拖拽事件，默認(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();
}

更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《php curl用法總結(jié)》、《PHP數(shù)組(Array)操作技巧大全》、《php排序算法總結(jié)》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》、《PHP數(shù)學(xué)運(yùn)算技巧總結(jié)》、《php正則表達(dá)式用法總結(jié)》、《PHP運(yùn)算與運(yùn)算符用法總結(jié)》、《php字符串(string)用法總結(jié)》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》

希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論