uniapp 지도가 확대/축소 시 유연하지 않은 이유는 무엇입니까?

웹 애플리케이션과 모바일 애플리케이션의 인기로 인해 위치 지정 및 매핑 기능은 많은 프로그램에서 중요한 부분이 되었습니다. 하지만 때로는 uniapp의 지도 기능을 사용할 때 지도의 확대/축소가 충분히 유연하지 않은 것을 발견할 수 있으며, 이는 사용자 경험에 큰 영향을 미칠 것입니다.

이 기사에서는 uniapp의 유연하지 못한 지도 크기 조정 이유와 몇 가지 기술적 수단을 통해 이 문제를 해결하는 방법을 살펴보겠습니다.

1. uniapp의 지도 확대/축소가 유연하지 못한 이유

사실 uniapp에 포함된 지도 구성 요소는 이미 기본적인 확대/축소 기능을 제공하지만 일부 애플리케이션 시나리오에서는 여전히 유연하지 못한 지도 확대/축소 문제에 직면합니다. 주요 이유는 다음과 같습니다.

• 지도 구성 요소의 기본 확대/축소 수준이 애플리케이션의 요구 사항을 완전히 충족하지 못할 수 있습니다.
• 지도 확대/축소의 감도가 낮고 사용자가 오랫동안 확대/축소를 조정해야 합니다. 원하는 확대/축소 수준에 도달하는 데 걸리는 시간
• 지도 확대/축소의 중심점은 고정되지 않으며, 사용자가 의도하지 않은 확대/축소 효과가 발생할 수 있습니다.

2. uniapp의 유연하지 않은 지도 확대/축소에 대한 솔루션

위 문제에 대한 해결 방법은 그리 복잡하지 않습니다. 다음 방법을 통해 지도 확대/축소의 유연성과 사용자 경험을 향상시킬 수 있습니다.

옵션 1: 확대/축소 사용자 정의 level

uniapp에서 제공하는 지도 컴포넌트는 기본적으로 몇 가지 일반적인 확대/축소 수준을 제공하지만, 지도의 확대/축소 수준을 보다 세부적으로 제어하려면 에서 제공하는 setZoom() 메서드를 통해 코드에서 확대/축소 수준을 맞춤 설정할 수 있습니다. 유니앱. 예를 들어, 페이지가 로드될 때 지도의 초기 확대/축소 수준을 설정할 수 있습니다.

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

옵션 2: 확대/축소 감도 설정

사용자가 오랫동안 확대/축소를 작동하는 것을 방지하기 위해 확대/축소 감도를 설정할 수 있습니다. uniapp에서 제공하는 지도 컴포넌트입니다. 컴포넌트에 제스처 이벤트를 추가하고, 제스처의 시작 위치와 이동 거리를 판단하여 줌 정도를 제어하는 ​​방식이다. 다음은 간단한 샘플 코드입니다.

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

위 코드에서는 확대/축소가 시작될 때 touchStart() 메서드를 사용하여 거리를 가져오고, touchMove() 메서드는 두 지점 간의 거리 차이를 사용하여 확대/축소 정도를 계산합니다. , 감도 매개변수를 통해 줌 감도를 조정합니다.

옵션 3: 확대/축소 중심점 설정

마지막 단계는 확대/축소 중심점을 제어하는 ​​것입니다. 기본적으로 uniapp에서 제공하는 지도 컴포넌트의 줌 중심점은 사용자의 제스처 위치에 따라 변경되므로 코드를 통해 줌 중심점을 지정해야 합니다.

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

위 코드에서 우리는 include-points 속성을 통해 지정합니다. 지도 영역의 위치 범위를 지정하고 Mounted() 라이프 사이클 후크에서 includePoints() 메서드를 호출합니다. 이 메서드는 지도의 확대/축소 중심점을 자동으로 계산하여 지도에 설정할 수 있습니다. 이는 사용자가 확대/축소할 때 지도의 위치가 잘못되는 것을 방지할 수 있습니다.

간단히 말하면, uniapp에서 제공하는 지도 구성 요소는 사용하기 매우 쉽지만 일부 특별한 응용 시나리오의 경우 지도 구성 요소를 직접 미세 조정해야 할 수도 있습니다. 이 기사에서는 모든 사람이 유연하지 못한 uniapp 맵 스케일링 문제를 해결하는 데 도움이 되기를 바라며 몇 가지 일반적인 기술 방법을 소개합니다.

위 내용은 uniapp 지도가 확대/축소 시 유연하지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!