uniapp map地图 拖动页面后点击按钮返回当前位置

方法一：通过controls实现

使用controls在地图上显示一个btn图标，点击时调用接口回到当前位置：

<template>
  <view>
    <map
      id="around-food-map"
      style=" 100vw; height: 100vh;"
      :latitude="latitude"
      :longitude="longitude"
      :controls="controls"
      @controltap="onControltap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909, // 初始定在首都
      longitude: 116.39742,
      controls: [
        {
          //在地图上显示控件，控件不随着地图移动
          id: 0, //控件id
          iconPath: "../../static/current-location.png", //显示的图标
          clickable: true,
          position: {
            //控件在地图的位置
            left: 200,
            top: 200,
             60,
            height: 60,
          },
        },
      ],
    };
  },/*  */
  methods: {
    onControltap(control) {
      uni.createMapContext("around-food-map", this).moveToLocation({
        longitude: this.longitude,
        latitude: this.latitude,
      });
    },
  },
};
</script>

不过微信官网说controls即将废弃，建议使用 cover-view 代替，所以下面使用 cover-view

方法二：使用 cover-view 实现

<template>
  <view class="map-container">
    <map
      id="around-company-map"
      style=" 100vw; height: 100vh;"
      :latitude="latitude"
      :longitude="longitude"
    >
      <cover-view class="cover-view" @click="onControltap"></cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /* 地图 */
      id: 0, // 使用 marker点击事件 需要填写id
      latitude: 39.909, // 默认定在首都
      longitude: 116.39742,
    };
  },
  methods: {
    onControltap(control) {
      uni.createMapContext("around-company-map", this).moveToLocation({
        longitude: this.longitude,
        latitude: this.latitude,
      });
    },
  },
};
</script>

<style lang="less">
@import "~@/styles/global.less";
.map-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  .cover-view {
     60px;
    height: 60px;
    border-radius: 50%;
    background-image: url("~@/static/current-location.png");
    background-size: 60px 60px;
    background-position: center center;
    position: absolute;
    bottom: 24px;
    right: 16px;
  }
}
</style>