uniapp 지도가 확대/축소 시 유연하지 않은 이유는 무엇입니까?
- PHPz원래의
- 2023-04-20 13:48:421545검색
웹 애플리케이션과 모바일 애플리케이션의 인기로 인해 위치 지정 및 매핑 기능은 많은 프로그램에서 중요한 부분이 되었습니다. 하지만 때로는 uniapp의 지도 기능을 사용할 때 지도의 확대/축소가 충분히 유연하지 않은 것을 발견할 수 있으며, 이는 사용자 경험에 큰 영향을 미칠 것입니다.
이 기사에서는 uniapp의 유연하지 못한 지도 크기 조정 이유와 몇 가지 기술적 수단을 통해 이 문제를 해결하는 방법을 살펴보겠습니다.
- uniapp의 지도 확대/축소가 유연하지 못한 이유
사실 uniapp에 포함된 지도 구성 요소는 이미 기본적인 확대/축소 기능을 제공하지만 일부 애플리케이션 시나리오에서는 여전히 유연하지 못한 지도 확대/축소 문제에 직면합니다. 주요 이유는 다음과 같습니다.
- 지도 구성 요소의 기본 확대/축소 수준이 애플리케이션의 요구 사항을 완전히 충족하지 못할 수 있습니다.
- 지도 확대/축소의 감도가 낮고 사용자가 오랫동안 확대/축소를 조정해야 합니다. 원하는 확대/축소 수준에 도달하는 데 걸리는 시간
- 지도 확대/축소의 중심점은 고정되지 않으며, 사용자가 의도하지 않은 확대/축소 효과가 발생할 수 있습니다.
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!