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

高德地图标记点要注意的问题高德地图标记点要注意的问题当打开高德地图的时候,使用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)


相关推荐

  • 学习PHP好,还是Python好呢?

    学习PHP好,还是Python好呢?

    2021年10月24日
  • 启动打印服务bat_关闭文件与打印机服务 bat

    启动打印服务bat_关闭文件与打印机服务 bat重启打印机服务bat命令@echooffecho停止打印服务netstopSpoolerecho重新启动打印服务netstartSpoolerecho完成!!!!pause

  • Response.ContentType详细说明

    Response.ContentType详细说明不同的ContentType会影响客户端所看到的效果.默认的ContentType为text/html也就是网页格式.代码如:显示的为网页,而则会显示html原代码.以下为一些常用的ContentTypeGIFimagesJPEGimagesTIFFimagesMICR

  • 解决主流浏览器不再支持Flash Player的一个简单可行的办法

    解决主流浏览器不再支持Flash Player的一个简单可行的办法解决主流浏览器不再支持FlashPlayer的一个简单可行的办法今天一个朋友因为打不开网页上的flash视频而发愁,本人便自告奋勇地要帮助他解决问题。自从2020年12月起,各大浏览器纷纷宣布不支持FlashPlayer,导致很多网站不能正常使用。网上的解决方案五花八门,安装插件的,借助脚本的,借助中间件的,实行起来非常困难。经过几个小时的尝试,终于找到了最快速可行的、没有技术门槛的方法:下载一个特殊的旧版国产浏览器。这个浏览器就是傲游浏览器(Max…

  • 歌曲的BPM (Beat Per Minute)–每分钟节拍数[通俗易懂]

    歌曲的BPM (Beat Per Minute)–每分钟节拍数[通俗易懂]foobar2000解决舞曲挑选

  • 1677个高频单词_3500高频词汇表

    1677个高频单词_3500高频词汇表给一非空的单词列表,返回前 k 个出现次数最多的单词。返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率,按字母顺序排序。示例 1:输入: [“i”, “love”, “leetcode”, “i”, “love”, “coding”], k = 2输出: [“i”, “love”]解析: “i” 和 “love” 为出现次数最多的两个单词,均为2次。 注意,按字母顺序 “i” 在 “love” 之前。 示例 2:输入: [“the”, “day”, “is

发表回复

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

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