PHP+js realizes multi-point annotation on Baidu map

墨辰丷
Release: 2023-03-28 12:58:01
Original
1996 people have browsed it

This article mainly introduces the method of php js to implement multi-point annotation on Baidu map, involving techniques related to php combined with js for Baidu map interface calling and json operation. Friends who need it can refer to it

The details are as follows:

1.php creates json data

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

2.js passes in json data

Similar to this structure

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"
}];
Copy after login

js is good at processing json data

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

3. Processing maps

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning.


Related recommendations:

phpHow to obtain IP and URL

Detailed explanation of the solution to the wrong id returned by Laravel related query in PHP

php file_get_contents implements the method of getting the array elements in the file

The above is the detailed content of PHP+js realizes multi-point annotation on Baidu map. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!