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

高德地图标记点要注意的问题高德地图标记点要注意的问题当打开高德地图的时候,使用API进行获取自身位置坐标,然后再进行setCenter设置中心是这样的。直接看代码:initMap(){//初始化地图map=newAMap.Map(‘map-gaode’,{resizeEnable:true,zoom:13})//初始化中心点//1、无坐标有详细地址时letsure=this.initAddress()

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

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

当打开高德地图的时候,使用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
    })
  }

就不会报错了:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143607.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号