uniapp之高德地图 无论如何拖动地图，中心位置不会改变

Question

发现这样一个app的地图功能听新颖的--无论怎么拖动地图，十字架在手机屏幕中心位置不会改变，就犹如狙击枪的瞄准镜的那般感觉，想实现类似的，不曾想竟碰壁了，有哪位遇到过，或者有思路的帮个忙，指点一下迷津可好呀？

Answer 1

引用 皆我百晓生 小程序回复内容作答：

在uni-app中使用高德地图，可以通过以下步骤实现拖动地图后中心位置不改变的效果：

1. 导入高德地图SDK
   首先，在你的uni-app项目中引入高德地图插件，可以使用官方提供的uni-modules插件管理工具，或者直接下载相应的uni-app高德地图插件。

2. 创建地图组件
   在页面中创建一个地图组件，并设置组件的宽度和高度，在组件中初始化地图。

3. 设置地图拖动事件
   使用高德地图SDK提供的amap.moveend事件，监听地图的移动结束事件。当地图拖动结束后，获取地图中心点坐标，并将其设置为地图的中心点，实现中心位置不改变的效果。

4. 示例代码
   下面是一个简单的示例代码，实现了拖动地图后中心位置不改变的效果：

<template>
  <view>
    <amap :class="'map'" ref="map"></amap>
  </view>
</template>

<script>
  export default {
    onReady() {
      this.initMap()
    },
    methods: {
      initMap() {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            // 创建地图
            this.$refs.map.createMap({
              zoom: 10,
              latitude: res.latitude,
              longitude: res.longitude
            })
            
            // 监听地图移动结束事件
            this.$refs.map.addEventListener('moveend', () => {
              // 获取地图中心点坐标
              const center = this.$refs.map.getCenter()
              
              // 设置地图中心点
              this.$refs.map.setCenter(center)
            })
          }
        })
      }
    }
  }
</script>

<style>
  .map {
    width: 100%;
    height: 100%;
  }
</style>

在上面的代码中，amap是地图组件的自定义标签，ref="map"用于获取地图组件的引用。onReady生命周期钩子函数用于在页面加载完成后初始化地图。

通过uni.getLocation接口获取当前位置的经纬度，然后使用this.$refs.map.createMap方法创建地图，并设置地图的缩放级别和中心点。

接着，使用addEventListener方法监听地图的moveend事件，当地图移动结束后，获取地图的中心点坐标，并通过this.$refs.map.setCenter方法将其设置为地图的中心点。

最后，利用css设置地图组件的宽度和高度，使其充满整个页面。

希望以上内容对你有帮助，祝你实现类似狙击枪瞄准镜效果的地图功能成功！