Pourquoi la carte Uniapp est-elle inflexible en termes de zoom ?

Avec la popularité des applications Web et des applications mobiles, les fonctions de positionnement et de cartographie sont devenues une partie importante de nombreux programmes. Cependant, parfois, lorsque nous utilisons la fonction carte dans uniapp, nous pouvons constater que le zoom de la carte n'est pas assez flexible, ce qui aura un grand impact sur l'expérience utilisateur.

Dans cet article, nous explorerons les raisons de la mise à l'échelle inflexible de la carte dans uniapp et comment résoudre ce problème par des moyens techniques.

1. La raison pour laquelle le zoom de la carte dans uniapp est inflexible

En fait, le composant de carte fourni avec uniapp fournit déjà des fonctions de zoom de base, mais dans certains scénarios d'application, vous rencontrez toujours le problème du zoom de la carte inflexible. Les principales raisons sont les suivantes :

• Le niveau de zoom par défaut du composant cartographique peut ne pas répondre pleinement aux besoins de l'application.
• La sensibilité du zoom de la carte est faible et l'utilisateur doit ajuster le zoom pendant une longue période ; il est temps d'atteindre le niveau de zoom souhaité ;
• Le point central du zoom de la carte n'est pas fixe et des effets de zoom involontaires peuvent se produire.

2. Solution au zoom de carte inflexible dans uniapp

La solution au problème ci-dessus n'est pas très compliquée Nous pouvons améliorer la flexibilité et l'expérience utilisateur du zoom de carte par les moyens suivants :

Option 1 : Personnaliser le zoom. level

Le composant cartographique fourni par uniapp fournit par défaut des niveaux de zoom généraux, mais si nous voulons contrôler le niveau de zoom de la carte plus en détail, nous pouvons personnaliser le niveau de zoom dans le code via la méthode setZoom() fournie par uniapp. Par exemple, nous pouvons définir le niveau de zoom initial de la carte lors du chargement de la page :

<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 : Régler la sensibilité du zoom

Afin d'empêcher les utilisateurs d'utiliser le zoom pendant une longue période, nous pouvons définir la sensibilité du zoom dans le composant cartographique fourni par uniapp. La méthode consiste à ajouter des événements gestuels au composant et à contrôler le degré de zoom en jugeant la position de départ et la distance de mouvement du geste. Voici un exemple de code simple :

<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>

Dans le code ci-dessus, nous utilisons la méthode touchStart() pour obtenir la distance au début du zoom, et la méthode touchMove() utilise la différence de distance entre deux points pour calculer le degré. du zoom, via le paramètre de sensibilité pour ajuster la sensibilité du zoom.

Option 3 : Définir le point central du zoom

La dernière étape consiste à contrôler le point central du zoom. Par défaut, le point central du zoom du composant cartographique fourni par uniapp change avec la position du geste de l'utilisateur, nous devons donc spécifier le point central du zoom via le code. Le code est le suivant :

<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>

Dans le code ci-dessus, nous. spécifiez-le via l'attribut include-points La plage d'emplacement de la zone de la carte et appelez la méthode includePoints() dans le hook de cycle de vie Mounted(). Cette méthode peut calculer automatiquement le point central du zoom de la carte et le définir sur la carte. . Cela peut empêcher la carte d'être mal positionnée lorsque l'utilisateur effectue un zoom.

En bref, le composant cartographique fourni par uniapp est très simple à utiliser, mais pour certains scénarios d'application spéciaux, nous devrons peut-être procéder nous-mêmes à des ajustements précis du composant cartographique. Cet article présente quelques méthodes techniques courantes, dans l'espoir d'aider tout le monde à résoudre le problème de la mise à l'échelle rigide des cartes Uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!