![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
高德地图
_小郑有点困了
我的月亮永悬不落。
展开
-
高德地图模仿微信发送位置实现拾取坐标
高德地图实现微信定位拾取坐标效果图:这个拾取模式是,地图中间的这个标记不动,拖动地图,处于这个点下方的坐标即为标记点。为了考虑用户的学习成本尽量低,保持与微信一致,便于操作。实现思路:定位位置:可以利用高德的getCenter和setCenter方法,先绘制一个标记点到地图中心,调好大小位置。然后再利用定位把这个图标挪到和之前的标记点重合的位置即可。拿到坐标:那么每次移动地图,再用getCenter这个方法拿到坐标就行了。效果图:代码实现:html:<div cla原创 2021-11-09 13:48:41 · 1904 阅读 · 2 评论 -
高德地图点击标记点出现自定义信息窗体
高德地图点击标记点出现自定义信息窗体效果图:场景:例如点击地图中的某台共享单车,显示他的电量,状态等。页面自定义窗体html结构,然后通过点击标记点,得到坐标,将其定位上去。(高德内置方法)html:<div class="device-info" id="device-info" ref="deviceInfo"> <pclass="device-click-tlite">{{deviceMapData.output.selectItem.deviceNa原创 2021-11-09 13:35:26 · 2516 阅读 · 0 评论 -
高德地图自定义图片标记点
高德地图自定义图片标记点效果图:场景例如标记范围内共享单车的位置循环坐标数组然后绘制:this.deviceMapData.output.value.curProData.forEach((item,index)=>{ //循环单点绘制 不能自定义icon let marker = new AMap.Marker({ icon: new AMap.Icon({ image: '/static/img/原创 2021-11-09 13:29:42 · 1420 阅读 · 0 评论 -
高德地图获取可视区域内四角坐标(东北,东南,西南,西北)
高德地图获取可视区域内四角坐标(东北,东南,西南,西北)场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端。获取方法如下: // 初始化地图 map = new AMap.Map('map-gaode', { resizeEnable: true, zoom:6, })var tmapBounds = map.getBounds();var northwest = map.getBounds().getNorthWest()原创 2021-11-09 11:48:30 · 4301 阅读 · 2 评论 -
高德地图标记点要注意的问题
高德地图标记点要注意的问题当打开高德地图的时候,使用API进行获取自身位置坐标,然后再进行setCenter设置中心是这样的。直接看代码:initMap () { // 初始化地图 map = new AMap.Map('map-gaode', { resizeEnable: true, zoom:13 }) // 初始化中心点 // 1、无坐标 有详细地址时 let sure = this.initAddress()原创 2021-11-05 14:40:17 · 490 阅读 · 0 评论 -
vue使用高德地图小demo(标记点,画线,3D,叠加图片图层)
vue使用高德地图小demo(标记点,画线,3D)这个模式是3D的,可以看到地图是带有一定的倾角的。注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使用。代码复制即可用!效果图:代码实现:main.js是需要引入amap的:import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({ // 高德key key: '6b8d48xxxxxxx原创 2021-07-21 15:40:11 · 3718 阅读 · 2 评论