您的位置: 首页  >  文章  >  百度地图api根据后台数据添加多个坐标点

百度地图api根据后台数据添加多个坐标点

分类: 文章 • 2024-10-31 15:54:46

百度地图添加多个坐标点

百度地图api添加坐标点，项目中遇到，坐标点根据后台去获取数据，效果如下：
百度地图api根据后台数据添加多个坐标点
点击坐标点弹框，效果如下：
百度地图api根据后台数据添加多个坐标点
首先要引用百度地图api的链接还有密码，下面代码，都能实现上述图标的效果，就是把后台获取的数据，字段名字改一下，就可以了

<head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    </head>
<body>
    <div id="container"></div>
</body>

js代码，这个坐标是从后台获取的经纬度。所以设置了全局变量去保存经纬度了

  // //  全局变量这个是 坐标的
  var mapList = []
  // //  请求地图的坐标
  $.ajax({
    type: 'POST',
    url: url,
    async: false,
    success: function (data) {
      // console.log(data)
      if (data.status === 200) {
        // console.log(data.data)
        for (var i = 0; i < data.data.length; i++) {
          // console.log(data.data[i].coordinates.split(','))
          // console.log(data.data)
          mapList.push(data.data[i])
        }
        // console.log(mapList)
      }
    }
  })

下面是初始化地图的，坐标点根据后台返回的一个字段去显示不同的左边颜色，这个坐标我用的是图标的，vue项目中要把那个坐标图片路径用 require()

  //  初始化百度地图
  var map = new BMap.Map("container");
  // 创建地图实例  
  var point = new BMap.Point(116.404, 39.915);
  // 创建点坐标  
  map.centerAndZoom(point, 9);
  var marker = new BMap.Marker(point);
  // map.addOverlay(marker);
  map.enableScrollWheelZoom(true);
  function markerFun(points, infoWindows, icon) {
    var markers = new BMap.Marker(points, { icon: icon });
    map.addOverlay(markers);
    markers.addEventListener('click', function (event) {
      map.openInfoWindow(infoWindows, points);//参数：窗口、点  根据点击的点出现对应的窗口
    })
  }
  // console.log(mapList)
  for (var i = 0; i < mapList.length; i++) {
    // console.log(mapList[i].coordinates.split(','))
    var x = Number(mapList[i].coordinates.split(',')[0])
    var y = Number(mapList[i].coordinates.split(',')[1])
    // console.log(y)
    // 根据不同的状态设置不同的标记
    if (mapList[i].status != 0) {
      var icon = new BMap.Icon('/dist/img/map_marker.png', new BMap.Size(20, 32), {
        anchor: new BMap.Size(10, 30)
      })
    } else {
      var icon = new BMap.Icon('/dist/img/map_markerb.png', new BMap.Size(20, 32), {
        anchor: new BMap.Size(10, 30)
      })
    }
    var html = '<span>井号：</span>' + mapList[i].siloNumber + '<br>' + '<span>地址:</span>' + mapList[i].address + '<br>' + '<span>状态：<span>' + status
    var points = new BMap.Point(x, y);//创建坐标点
    var opts = {
      width: 300,
      height: 100,
      title: '管理员姓名：        ' + mapList[i].adminName
    }
    var infoWindows = new BMap.InfoWindow(html, opts);
    markerFun(points, infoWindows, icon);
  }

相关推荐