Mengapakah peta uniapp tidak fleksibel dalam mengezum?

Dengan populariti aplikasi web dan aplikasi mudah alih, kedudukan dan fungsi pemetaan telah menjadi bahagian penting dalam banyak program. Walau bagaimanapun, kadangkala apabila kami menggunakan fungsi peta dalam uniapp, kami mungkin mendapati bahawa zum peta tidak cukup fleksibel, yang akan memberi kesan yang besar kepada pengalaman pengguna.

Dalam artikel ini, kami akan meneroka sebab penskalaan peta dalam uniapp tidak fleksibel dan cara menyelesaikan masalah ini melalui beberapa cara teknikal.

1. Sebab mengapa zum peta dalam uniapp tidak fleksibel

Malah, komponen peta yang disertakan dengan uniapp sudah menyediakan fungsi zum asas, tetapi dalam sesetengah senario aplikasi ia masih Menghadapi masalah penskalaan peta yang tidak fleksibel. Sebab utama adalah seperti berikut:

• Tahap zum lalai komponen peta mungkin tidak memenuhi keperluan aplikasi sepenuhnya
• Sensitiviti zum peta adalah rendah dan pengguna perlu melaraskan zum untuk masa yang lama Hanya dengan cara ini tahap zum yang diingini boleh dicapai
• Titik tengah zum peta tidak tetap, dan mungkin terdapat kesan zum yang tidak dilakukan oleh pengguna; mahu.

2. Penyelesaian kepada penskalaan peta yang tidak fleksibel dalam uniapp

Penyelesaian untuk masalah di atas tidak begitu rumit berikut bermaksud Prestasi dan pengalaman pengguna:

Pilihan 1: Tahap zum tersuai

Komponen peta yang disediakan oleh uniapp menyediakan beberapa tahap zum umum secara lalai, tetapi jika kita mahu mengawal tahap zum peta dengan lebih terperinci, anda boleh menyesuaikan tahap zum dalam kod melalui kaedah setZoom() yang disediakan oleh uniapp. Sebagai contoh, kita boleh menetapkan tahap zum awal peta apabila halaman dimuatkan:

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

Pilihan 2: Tetapkan kepekaan zum

Untuk mengelakkan pengguna mengendalikan zum untuk masa yang lama masa, kami boleh menyediakan Tetapkan sensitiviti zum dalam komponen peta. Kaedahnya adalah untuk menambah peristiwa gerak isyarat pada komponen dan mengawal darjah zum dengan menilai kedudukan permulaan dan jarak pergerakan isyarat tersebut. Berikut ialah kod sampel mudah:

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

Dalam kod di atas, kami menggunakan kaedah touchStart() untuk mendapatkan jarak apabila zum bermula dan kaedah touchMove() menggunakan perbezaan jarak antara dua mata Kira tahap zum dan laraskan sensitiviti zum melalui parameter kepekaan.

Pilihan 3: Tetapkan titik tengah zum

Langkah terakhir ialah mengawal titik tengah zum. Secara lalai, titik tengah zum komponen peta yang disediakan oleh uniapp berubah dengan kedudukan gerak isyarat pengguna, jadi kami perlu menentukan titik tengah zum melalui kod tersebut:

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

Dalam kod di atas, kami menghantar atribut include-points untuk menentukan julat lokasi kawasan peta, dan memanggil kaedah includePoints() dalam cangkuk kitaran hayat mount() Kaedah ini boleh mengira titik tengah zum peta dan secara automatik tetapkannya pada peta, dengan itu menghalang pengguna daripada Peta tidak diletakkan dengan betul semasa mengezum.

Ringkasnya, komponen peta yang disediakan oleh uniapp sangat mudah digunakan, tetapi untuk beberapa senario aplikasi khas, kami mungkin perlu membuat beberapa penalaan halus komponen peta itu sendiri. Artikel ini memperkenalkan beberapa kaedah teknikal biasa, dengan harapan dapat membantu semua orang menyelesaikan masalah penskalaan peta uniapp yang tidak fleksibel.

Atas ialah kandungan terperinci Mengapakah peta uniapp tidak fleksibel dalam mengezum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!