<template>
<div class="container">
<map style="width: 100%; height: 100vh;" :latitude="state.latitude" :longitude="state.longitude"
:markers="state.markers"
:min-scale="3"
:max-scale="ps.maxScale"
:scale="16">
</map>
</div>
</template>
<script setup lang='ts'>
import { reactive, unref, onBeforeMount, onMounted } from 'vue'
const ps = reactive({
maxScale: 20
})
const state = reactive({
id: 0,
title: 'map',
latitude: 29.646893,
longitude: 106.571712,
markers: [{
id: 1,
latitude: 29.646893,
longitude: 106.571712,
iconPath: '/static/gdm-icon/point.png'
}, {
id: 2,
latitude: 29.629583,
longitude: 106.565392,
iconPath: '/static/gdm-icon/point.png'
}],
polyline: {
points: [{
id: 1,
latitude: 29.646893,
longitude: 106.571712,
iconPath: '/static/gdm-icon/point.png'
}, {
id: 2,
latitude: 29.629583,
longitude: 106.565392,
iconPath: '/static/gdm-icon/point.png'
}],
color: '#FE6550',
width: 4,
arrowLine: true
},
polygons: {
points: [
{latitude: 29.636637,longitude: 106.566919},
{latitude: 29.631137,longitude: 106.567435},
{latitude: 29.629553,longitude: 106.574862},
{latitude: 29.63571,longitude: 106.578026}
],
fillColor: '#FFD7AB'
}
})
</script>
<style lang="scss" scoped></style>
- 发布:2024-03-01 16:49
- 更新:2024-03-01 16:49
- 阅读:197
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 17763.1
第三方开发者工具版本号: 3.7.3
基础库版本号: 3.7.3
项目创建方式: CLI
CLI版本号: 3.0.0-3070320230222002
App下载地址或H5⽹址: 微信代码片段 https://developers.weixin.qq.com/s/ORSuzmmc7CPe
示例代码:
操作步骤:
只要传递给map组件的max-scale属性为响应式,比如,props、ref、computed、reactive等, 可以使用普通变量 let var const等等
只要传递给map组件的max-scale属性为响应式,比如,props、ref、computed、reactive等, 可以使用普通变量 let var const等等
预期结果:
地图正常缩放
地图正常缩放
实际结果:
地图缩放程度为最小,且无法放大
地图缩放程度为最小,且无法放大
bug描述:
vue3 中微信小程序地图max-scale动态赋值,在andoird微信版上某一机型出bug,自动缩放自最小,且无法放大
机型:HONOR Play4T Pro
hormonyOS 版本:3.0.0
微信调试库:3.3.4
微信版本 8.0.47