php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注-創(chuàng)新互聯(lián)

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

網(wǎng)站設(shè)計(jì)制作過(guò)程拒絕使用模板建站；使用PHP+MYSQL原生開(kāi)發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十載的創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司。

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

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: "名稱：廣州火車站",
  point: "113.264531,23.157003",
  address: "廣東省廣州市廣州火車站",
  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ù)

3.處理地圖

document.write('');
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 = '' + pro.name + '

'; //pop彈窗信息 var html = []; html.push(''); html.push(''); html.push('地址:'); html.push('' + pro.address + ' '); html.push(''); html.push(''); 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í)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

名稱欄目：php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/djsgod.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

php+js如何實(shí)現(xiàn)百度地圖多點(diǎn)標(biāo)注-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管