高德地图自定义点标记踩坑

最新推荐文章于 2022-06-13 18:52:49 发布

追逐春天的大孩子

最新推荐文章于 2022-06-13 18:52:49 发布

阅读量1.9k

点赞数

分类专栏：地图 js react 文章标签：自定义点标记

本文链接：https://blog.csdn.net/weixin_43709908/article/details/107535392

版权

本文主要介绍如何在高德地图上实现自定义点标记。首先，需要将墨卡托坐标转换为经纬度坐标，然后在地图上进行标记。通过坐标转换方法和地图对象的实例化，成功完成自定义点的标记操作。

摘要由CSDN通过智能技术生成

先看一下要做的效果
在这里插入图片描述如上图所示，箭头所指示的就是我们要进行的点标记，
先说一下我做的这个步骤
1.上图所指示的坐标当时是用墨卡托坐标，要将其转成高德地图坐标表示的经纬度的形式，才能在高德地图中表示出来所指示的地点。
墨卡尔托坐标表示形式：12738037.307083402,3562717.500125364
就是上面这个坐标进行相应的点标记。
首先我们要对当前坐标进行相应的转换，转变成我们想要的坐标，供我们在下面调用进行使用。
转换方法：

// 转换坐标
    MercatorWeblonLat () {
   
        const {
   position}=this.state
        //因为此时position是一个对象，因此我们要将position转换为数组，取出x坐标和y坐标
         let x =position.split(',')[0],
             y =position.split(