Warum ist die Uniapp-Karte beim Zoomen unflexibel?

Mit der Popularität von Webanwendungen und mobilen Anwendungen sind Positionierungs- und Kartenfunktionen zu einem wichtigen Bestandteil vieler Programme geworden. Wenn wir jedoch die Kartenfunktion in Uniapp verwenden, stellen wir manchmal fest, dass der Zoom der Karte nicht flexibel genug ist, was einen großen Einfluss auf die Benutzererfahrung hat.

In diesem Artikel werden wir die Gründe für die unflexible Kartenskalierung in uniapp untersuchen und wie wir dieses Problem mit technischen Mitteln lösen können.

1. Der Grund, warum der Kartenzoom in Uniapp unflexibel ist

Tatsächlich bietet die mit Uniapp gelieferte Kartenkomponente bereits grundlegende Zoomfunktionen, aber in einigen Anwendungsszenarien stößt man immer noch auf das Problem des unflexiblen Kartenzooms. Die Hauptgründe sind folgende:

• Die Standardzoomstufe der Kartenkomponente entspricht möglicherweise nicht vollständig den Anforderungen der Anwendung.
• Die Empfindlichkeit des Kartenzooms ist gering und der Benutzer muss den Zoom lange anpassen Zeit, um die gewünschte Zoomstufe zu erreichen;
• Der Mittelpunkt des Kartenzooms ist nicht festgelegt und es können vom Benutzer unbeabsichtigte Zoomeffekte auftreten.

2. Lösung für den unflexiblen Kartenzoom in Uniapp

Die Lösung für das oben genannte Problem ist nicht sehr kompliziert. Wir können die Flexibilität und Benutzererfahrung des Kartenzooms durch die folgenden Mittel verbessern:

Option 1: Passen Sie den Zoom an level

Die von uniapp bereitgestellte Kartenkomponente bietet standardmäßig einige allgemeine Zoomstufen. Wenn wir jedoch die Zoomstufe der Karte detaillierter steuern möchten, können wir die Zoomstufe im Code über die von bereitgestellte setZoom()-Methode anpassen Uniapp. Zum Beispiel können wir die anfängliche Zoomstufe der Karte festlegen, wenn die Seite geladen wird:

<template>
  <view>
    <map :latitude="latitude" :longitude="longitude" :scale="scale"></map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: '39.92',
      longitude: '116.46',
      scale: '16'
    }
  }
}
</script>

Option 2: Zoomempfindlichkeit einstellen

Um zu verhindern, dass Benutzer den Zoom längere Zeit bedienen, können wir die Zoomempfindlichkeit einstellen die von uniapp bereitgestellte Kartenkomponente. Die Methode besteht darin, der Komponente Gestenereignisse hinzuzufügen und den Zoomgrad durch Beurteilung der Startposition und Bewegungsentfernung der Geste zu steuern. Das Folgende ist ein einfacher Beispielcode:

<template>
  <view>
    <map :latitude="latitude" :longitude="longitude" v-on:touchstart="touchStart" v-on:touchmove="touchMove"></map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: '39.92',
      longitude: '116.46',
      oldDistance: 0,
      scale: 16,
      sensitivity: 0.001
    }
  },
  methods: {
    touchStart(e) {
      const _touch = e.touches;
      if (_touch.length == 2) {
        this.oldDistance = this.getDistance(_touch[0], _touch[1]);
      }
    },
    touchMove(e) {
      const _touch = e.touches;
      if (_touch.length == 2) {
        const newDistance = this.getDistance(_touch[0], _touch[1]);
        const distance = newDistance - this.oldDistance;
        const scale = this.scale + distance * this.sensitivity;
        this.oldDistance = newDistance;
        this.scale = scale < 5 ? 5 : scale > 20 ? 20 : scale;
      }
    },
    getDistance(p1, p2) {
      const x = p2.clientX - p1.clientX;
      const y = p2.clientY - p1.clientY;
      return Math.sqrt(x * x + y *y);
    }
  }
}
</script>

Im obigen Code verwenden wir die Methode touchStart(), um den Abstand zu Beginn des Zoomens zu ermitteln, und die Methode touchMove() verwendet den Abstandsunterschied zwischen zwei Punkten, um den Grad des Zoomens zu berechnen , über den Empfindlichkeitsparameter, um die Zoomempfindlichkeit anzupassen.

Option 3: Zoom-Mittelpunkt festlegen

Der letzte Schritt besteht darin, den Zoom-Mittelpunkt zu steuern. Standardmäßig ändert sich der Zoom-Mittelpunkt der von uniapp bereitgestellten Kartenkomponente mit der Position der Geste des Benutzers. Daher müssen wir den Zoom-Mittelpunkt über den Code angeben. Der Code lautet wie folgt:

<template>
  <view>
    <map :latitude="latitude" :longitude="longitude" :scale="scale" :include-points="includePoints"
      ref="map"
    ></map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: '39.92',
      longitude: '116.46',
      scale: '16',
      markers: [
        {
          id: '1',
          latitude: '39.92',
          longitude: '116.46',
          name: '地标'
        }
      ]
    }
  },
  computed: {
    includePoints() {
      const { markers } = this;
      const longitude = markers.map(item => item.longitude);
      const latitude = markers.map(item => item.latitude);
      return [
        {
          longitude: Math.min.apply(null, longitude),
          latitude: Math.min.apply(null, latitude)
        },
        {
          longitude: Math.max.apply(null, longitude),
          latitude: Math.max.apply(null, latitude)
        }
      ];
    }
  },
  mounted() {
    const { markers } = this;
    const { map } = this.$refs;
    map.includePoints({
      padding: [200],
      points: markers,
      success: (res) => {
        console.log(res);
        map.scale = 16;
        map.longitude = res.center.longitude;
        map.latitude = res.center.latitude;
      }
    })
  }
}
</script>

Im obigen Code haben wir Geben Sie den Standortbereich des Kartenbereichs über das Attribut include-points an und rufen Sie die Methode includePoints() im Lebenszyklus-Hook mount() auf. Diese Methode kann den Zoom-Mittelpunkt der Karte automatisch berechnen und auf die Karte festlegen Dadurch kann verhindert werden, dass die Karte beim Zoomen falsch positioniert wird.

Kurz gesagt, die von uniapp bereitgestellte Kartenkomponente ist sehr einfach zu verwenden, aber für einige spezielle Anwendungsszenarien müssen wir möglicherweise selbst eine Feinabstimmung der Kartenkomponente vornehmen. Dieser Artikel stellt einige gängige technische Methoden vor und hofft, allen dabei zu helfen, das Problem der unflexiblen Uniapp-Kartenskalierung zu lösen.

Das obige ist der detaillierte Inhalt vonWarum ist die Uniapp-Karte beim Zoomen unflexibel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!