高德地图标记点要注意的问题

全栈程序员站长

发布于 2022-08-26 11:47:47

8510

发布于 2022-08-26 11:47:47

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

高德地图标记点要注意的问题

当打开高德地图的时候，使用API进行获取自身位置坐标，然后再进行setCenter设置中心是这样的。

直接看代码：

initMap () { 
   
    // 初始化地图
    map = new AMap.Map('map-gaode', { 
   
      resizeEnable: true,
      zoom:13
    })

    // 初始化中心点

    // 1、无坐标 有详细地址时
    let sure = this.initAddress()
    if(sure){ 
   
      this.clickSearch()

      // 2、无详细地址
    }else{ 
   
      var nowPoint = map.getCenter()   
      if(this.mapCenter){ 
   
        console.log(this.mapCenter,nowPoint)
        nowPoint = this.mapCenter
      }
      this.setCenter(nowPoint)   //这里这里  打印
      this.setAddress(nowPoint)
    }
    

    // 地图侧边栏
    AMap.plugin('AMap.ToolBar',function(){ 
   
      //加载工具条
      var toolbar = new AMap.ToolBar({ 
   
        position:'LB'
      });
      map.addControl(toolbar)
    })

    // 绑定点击事件
    let that = this
    var clickListener = AMap.event.addListener(map, "click", function(e) { 
   
      var { 
   lng, lat} = e.lnglat
      // 设置中心点
      that.setCenter(e.lnglat)

      //根据经纬度地址
      that.setAddress(e.lnglat)      
    })
  }

打印获取的坐标结构如下：

对应的setCenter方法如下：

setCenter(location){ 
   
    map.setCenter([location.lng, location.lat])
    map.clearMap()
    new AMap.Marker({ 
   
      position: location,   
      map: map
    })
  }

看似没有任何使用上的问题，但是当我想使用自己手动输入坐标进行设置的时候，那么我能传到这个方法的只有经纬度而已，没有上面截图的像素值。就会出现报错。

正确写法如下：

 setCenter(location){ 
   
    map.setCenter([location.lng, location.lat])
    map.clearMap()
    new AMap.Marker({ 
   
      position: new AMap.LngLat(location.lng, location.lat),    //标记点用这个方法比较好   不然缺少像素位置值
      map: map
    })
  }