uniapp小程序地图重置视角

记载了项目开发过程中map组件如何重置视角。

文章目录

• 前言
• 一、问题描述
• 二、步骤
  • 1.标签容器
  • 2.定义变量及事件

---

前言

本文主要记载了小程序map组件如何重置视角。

---

一、问题描述

uniapp根据longitude、latitude、scale分别设置经纬度、缩放，但是比较坑的一点是只有更改上述值时才会触发重置视角的效果，并且手动拖动或者缩放并不算更改上述值。

二、步骤

1.标签容器

代码如下：

<map id="map" :longitude="longitude" :latitude="latitude" :scale="scale" themt="satellite"></map>

2.定义变量及事件

在data中定义几个变量：

data() {
    return {
      longitude: 116.432934,
      latitude: 39.8427,
      scale: 10,
      // 固定的经纬度，为了重置视图
      fixLongitude: undefined,
      fixLatitude: undefined,
      fixScale: undefined,
      mapContext: undefined,
    }
  },

 官网原文：创建并返回 map 上下文 mapContext 对象：

onReady() {
    this.mapContext = uni.createMapContext('map', this)
  },

给按钮绑定重置视角的事件：
 

resetView() {
      this.mapContext.getScale({
        success: res => {
          const scale = this.fixScale
          this.scale = res.scale;
          this.$nextTick(() => {
            this.scale = scale
          })
        }
      })
      this.mapContext.getCenterLocation({
        success: res => {
          const fixPos = [this.fixLongitude, this.fixLatitude]
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.$nextTick(() => {
            this.longitude = fixPos[0]
            this.latitude = fixPos[1]
          })
        }
      })
    },