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

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

就不会报错了:

在这里插入图片描述

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

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

(0)
上一篇 2022年5月11日 下午2:20
下一篇 2022年5月11日 下午2:20


相关推荐

  • 深入浅出–Linux基础命令知识(总结,配图文解释)

    深入浅出–Linux基础命令知识(总结,配图文解释)前言 在学习 Linux 时候想必大家都会遇到一个问题 就是 Linux 中命令太多了 今天博主给大家总结总结收集一下咱们最常用到的命令 在本博主用的操作系统中感觉 Ubuntu 是比较好用的 所以一切都在 Ubuntu 中 但是命令不影响啥 Linux 基础命令 一 用户目录 二 常用的 Linux 命令 1 ls 2 tree 3 pwd 4 clear 5 cd 命令集合 三 路径 1 绝对路径 2 相对路径 四 隐藏技能 五 文件命令 1 touch 2 mkdir 3 rm 4 rmdir 5 cp 6 mv 六 终

    2026年3月18日
    2
  • Python中的groupby分组

    Python中的groupby分组写在前面:之前我对于groupby一直都小看了,而且感觉理解得不彻底,虽然在另外一篇文章中也提到groupby的用法,但是这篇文章想着重地分析一下,并能从自己的角度分析一下groupby这个好东西~OUTLINE根据表本身的某一列或多列内容进行分组聚合通过字典或者Series进行分组根据表本身的某一列或多列内容进行分组聚合这个是groupby的最常见操作,根据…

    2022年5月26日
    75
  • 零基础入门AI智能体:以通义和智谱大模型插件为例,教你如何调用第三方平台的大模型插件

    零基础入门AI智能体:以通义和智谱大模型插件为例,教你如何调用第三方平台的大模型插件

    2026年3月12日
    1
  • js拼接字符串遇到onclick时

    js拼接字符串遇到onclick时这个注意代码规范就好了错误的 maxData push lt divclass rating star onclick saveSurvey questionsId gt 点我 lt div gt 正确的 maxData push lt divclass rating star onclick saveSurvey que

    2025年8月9日
    4
  • Android代码混淆常见配置[通俗易懂]

    Android代码混淆常见配置[通俗易懂]Android代码混淆常见配置1.manifest中注册的都不能混淆,如果混淆了就找不到了,所以一下类不能被混淆,一般保持原样。-keeppublicclass*extendsandroid.app.Activity-keeppublicclass*extendsandroid.app.Application -keeppublicclass*exten

    2022年5月7日
    72
  • php resize函数,php调整图片大小的image resize函数详解

    php resize函数,php调整图片大小的image resize函数详解我用过一些 php 实现的图片大小调整 imageresize 函数 但是都不是很完美 有的图片在调整之后完全变形 还有的无缘无故多了一些线条 有的在颜色亮度上也差强人意 今天我重新找了下 又有了一些收获 if isset FILES manager photo amp amp empty FILES manager photo name photo nam

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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