So implementieren Sie Mehrpunktanmerkungen auf einer Baidu-Karte mit PHP+JS

黄舟
Freigeben: 2023-03-06 06:52:01
Original
2680 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung von Mehrpunktanmerkungen auf einer Baidu-Karte mithilfe von PHP+JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

So implementieren Sie Mehrpunktanmerkungen auf einer Baidu-Karte mit PHP+JS

1.php erstellt JSON-Daten

$products = $this->product_db->select($where);
$products_json = json_encode($products);
Nach dem Login kopieren

2.js übergibt JSON-Daten
Eine ähnliche Struktur

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"
}];
Nach dem Login kopieren

js eignet sich gut für die Verarbeitung von JSON-Daten

<script>
var products_json = {$products_json};
// 百度地图
var citymap = new citymap(products_json,&#39;宿迁&#39;);
</script>
Nach dem Login kopieren

Verarbeitung von Karten

document.write(&#39;<script type="text/javascript" src=" 
</script>&#39;);
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,&#39;13&#39;);
    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 = &#39;<p style="font-weight:bold;color:#CE5521;font-size:14px">
    <a href="?m=home&c=product&id=&#39;+ pro.id +&#39;">&#39; + pro.name + &#39;</a></p>&#39;;
    //pop弹窗信息 
    var html = [];
    html.push(&#39;<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>&#39;);
    html.push(&#39;<tr>&#39;);
    html.push(&#39;<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>&#39;);
    html.push(&#39;<td style="vertical-align:top;line-height:16px">&#39; + pro.address + &#39; </td>&#39;);
    html.push(&#39;</tr>&#39;);
    html.push(&#39;</tbody></table>&#39;);
    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();
}
Nach dem Login kopieren

Das Obige ist der Inhalt der Methode zur Implementierung von Mehrpunktanmerkungen auf der Baidu-Karte mit PHP+JS. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com). )!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage