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

百度地图添加多个坐标点

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


          
        
        
    

    

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 = '井号:' + mapList[i].siloNumber + '
' + '地址:' + mapList[i].address + '
' + '状态:' + 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); }

你可能感兴趣的:(百度地图)