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

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

// 转换坐标MercatorWeblonLat () {const {position}=this.state//因为此时position是一个对象，因此我们要将position转换为数组，取出x坐标和y坐标let x =position.split(',')[0],y =position.split(',')[1];let lng = x / 20037508.34 * 180;let lat = y / 20037508.34 * 180;lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);//此时的lng和lat分别就是对应x和y坐标console.log(x坐标:+lng)console.log(y坐标:+lat)}

在转换坐标完成之后
我们先实例化地图对象，在上面一篇文章中已经写到过，这里就直接略过，直接进行点标记的执行。

 // 渲染当前客户的详细地址//在坐标转换完成之后进行调用renderCustomerArea(lng,lat){// 在此处添加坐标就是点标记所指示的位置 let position = new AMap.LngLat(lng,lat);// 创建地图实例let map = new AMap.Map('container', {zoom:11,//级别//把当前坐标作为地图的中心点center: position,//中心点坐标//下面这两句着重作用是禁止对地图进行拖动和其他操作，固定地图。**zoomEnable:false,dragEnable: false,**});let marker = new AMap.Marker({icon:new AMap.Icon({            size: new AMap.Size(12, 16.5),  //图标大小//这个地方也要特别进行说明就是在进行自定义图标进行引入的时候要使用require进行自定义图标的引入image:require("@/asset/image/informationization/customer/position.png")}) ,  //这里position就是icon所在的位置上    position: position});marker.setMap(map);

这样就完成了自定义点的标记

高德地图自定义点标记踩坑相关推荐

高德地图自定义点标记大小_高德地图实现自定义小蓝点自定义点标记绘制多边形/圆形区域根据地图的移动显示或者隐藏自定义点标记的相关实现...
最近项目中有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法.首先说明要实现的功能需求.类似支付宝app内的跑腿功能,在全市的所有商铺,电梯广告等任意地点发布任务, ...
高德地图开发-常用api踩坑使用
一.高德地图的加载初始化在这就踩过很多坑,新建项目正常显示没问题,放到我们的项目就是不显示,加载不出来, 这个时候不要慌,只要确保下面三部完成就莫问题了 1.引入高德地图开发者api <scr ...
高德地图自定义点标记大小_高德地图自定义点标记图标大小
自定义点标记图标大小 //初始化地图对象,加载地图 var map = new AMap.Map("container", { resizeEnable: true, zoom:1 ...
高德地图升级v2.0踩坑日记
事情是这样的,有一天产品找到我说我们系统的地图绘制板块的时候有些卡,是否可以优化一下. 于是我持怀疑态度去系统查看,大部分的地图操作都很流畅,莫非产品在耍我??? 直到我点开了一个导入的板块数据(如下 ...
高德地图自定义点标记大小_自定义高德地图的标记样式和内容
利用循环添加多个点标记: addMarkersMethod(){ var map = new AMap.Map('gaode', { resizeEnable: true, //center: thi ...
高德地图自定义点标记大小_Vue：如何在地图上添加自定义覆盖物（点）
此文重点是在地图上标点,所以就省去引入百度地图的步骤了. 先给一下最终的效果. 这个效果主要是利用百度地图的"覆盖物"来实现的. 由于我做的这个要求显示不同的颜色来代表不同的所属者 ...
高德地图自定义图标的点标记Marker--初体验（二）
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明本文以Marker为主,其他点标记方法大差不差通过上两篇文章我们已经了 ...
Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
JAVA发布栅格图层_基于 WebGL实现自定义栅格图层踩坑实录
以下内容转载自totoro的文章<WebGL-Y轴翻转踩坑实录> 作者:totoro 链接:blog.totoroxiao.com/webgl-flipY- 来源:blog.totorox ...

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

高德地图自定义点标记踩坑相关推荐

最新文章

热门文章