Why is the uniapp map inflexible in zooming?

With the popularity of web applications and mobile applications, positioning and mapping functions have become an important part of many programs. However, sometimes when we use the map function in uniapp, we may find that the zoom of the map is not flexible enough, which will have a great impact on the user experience.

In this article, we will explore the reasons why the map scaling in uniapp is inflexible, and how to solve this problem through some technical means.

1. The reason why the map zoom in uniapp is inflexible

In fact, the map component that comes with uniapp already provides basic zoom functions, but in some application scenarios it will still Encountered the problem of inflexible map scaling. The main reasons are as follows:

• The default zoom level of the map component may not fully meet the needs of the application;
• The sensitivity of map zoom is low, and users need to adjust the zoom for a long time Only in this way can the desired zoom level be reached;
• The center point of the map zoom is not fixed, and a zoom effect that the user does not want may occur.

2. Solution to the inflexible map scaling in uniapp

The solution to the above problem is not very complicated. We can improve the flexibility of map scaling through the following means Performance and user experience:

Option 1: Custom zoom level

The map component provided by uniapp provides some regular zoom levels by default, but if we want to control the zoom level of the map in more detail , you can customize the zoom level in the code through the setZoom() method provided by uniapp. For example, we can set the initial zoom level of the map when the page loads:

<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: Set the zoom sensitivity

In order to prevent users from operating the zoom for a long time, we can use the map component provided by uniapp Set the zoom sensitivity in . The method is to add gesture events to the component and control the zoom degree by judging the starting position and movement distance of the gesture. The following is a simple sample code:

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

In the above code, we use the touchStart() method to get the distance when the zoom starts, and the touchMove() method calculates the zoom through the distance difference between two points The degree of scaling is adjusted through the sensitivity parameter.

Option 3: Set the zoom center point

The last step is to control the zoom center point. By default, the zoom center point of the map component provided by uniapp changes with the position of the user's gesture, so we need to specify the zoom center point through code. The code is as follows:

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

In the above code, we pass include- points attribute to specify the location range of the map area, and call the includePoints() method in the mounted() life cycle hook. This method can automatically calculate the zoom center point of the map and set it to the map, thus preventing the user from zooming in. The map cannot be positioned correctly.

In short, the map component provided by uniapp is very easy to use, but for some special application scenarios, we may need to make some fine-tuning of the map component ourselves. This article introduces some common technical methods, hoping to help everyone solve the problem of inflexible uniapp map scaling.

The above is the detailed content of Why is the uniapp map inflexible in zooming?. For more information, please follow other related articles on the PHP Chinese website!