PHP+js는 Baidu 지도에서 다중 지점 주석을 실현합니다.-PHP 튜토리얼-php.cn

PHP+js는 Baidu 지도에서 다중 지점 주석을 실현합니다.

墨辰丷

풀어 주다： 2023-03-28 12:58:01

원래의

2005명이 탐색했습니다.

이 글에서는 Baidu 지도 인터페이스 호출과 json 작업 관련 기술을 위해 php와 js를 결합하여 Baidu 지도에서 다지점 주석을 구현하는 php+js 방법을 주로 소개합니다.

자세한 내용은 다음과 같습니다. 다음:

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,&#39;宿迁&#39;);
</script>

로그인 후 복사

3. 지도 처리

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();
}

로그인 후 복사

위 내용은 이 글의 전체 내용이므로, 모든 분들의 학습에 도움이 되기를 바랍니다.