PHP+js réalise des annotations multipoints sur la carte Baidu

Cet article présente principalement la méthode php+js pour réaliser une annotation multipoint sur la carte Baidu, impliquant php combiné avec js pour l'appel de l'interface de la carte Baidu et les compétences liées au fonctionnement json. Les amis dans le besoin peuvent s'y référer

<.>Les détails sont les suivants :

1.php crée des données json

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

2.js transmet les données json

Une structure similaire à celle-ci

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 est bon pour traiter les données json

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

3. Cartes de traitement

document.write(&#39;<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></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();
}

Ce qui précède C'est tout le contenu de cet article, j'espère qu'il sera utile à tout le monde. L'apprentissage aide.

Recommandations associées :

phpComment obtenir une adresse IP et une URL

Explication détaillée de la solution au mauvais identifiant renvoyé par la requête associée à Laravel en PHP

php file_get_contents implémente la méthode d'obtention du éléments du tableau dans le fichier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!