高德地图拖动地图大头针一直处于屏幕中间 ionic

最新推荐文章于 2023-07-13 14:50:50 发布

王略略

最新推荐文章于 2023-07-13 14:50:50 发布

阅读量2.4k

点赞数

分类专栏： ionic 地图文章标签：地图 ionic

本文链接：https://blog.csdn.net/VLilyLUE/article/details/92765061

版权

ionic 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

先在项目中配置好高德地图，然后new一个AMap.Map类

 this.map = new AMap.Map('map-container', {
     resizeEnable: true, // 是否监控地图容器尺寸变化
     zoom: 17 // 初始化地图层级
 });

获取地图的中心点
```
 let position = this.map.getCenter();
```

把地图中心点转化为屏幕位置

 pixel = this.map.lngLatToContainer(position );  // 获得 Pixel 对象

设置屏幕拖动时的动作

 this.map.on('dragend', function () {
     // 一些操作
 });

在屏幕位置放置大头针（关于insertAdjacentHTML）

 const beer = '<div class="sp_s sp_13" style="position: absolute; top:' + (pixel.y - 10) + 'px; left: ' + (pixel.x - 10) + 'px;"></div>'; // 这里的class样式是大头针的图标
 const body_element = document.getElementById('movePoint-contain'); // #movePoint-contain是屏幕容器
 body_element.insertAdjacentHTML('beforeend', beer);