<template>
<view style="height: 400px;width: 750rpx">
<map v-if="markerList && markerList.length" id="uMap" class="uMap" ref="uMap" :scale="scale" :show-location="false" :enable-zoom="true"
:enable-scroll="true" :enable-rotate="true" :show-scale="true" :latitude="latitude" :longitude="longitude"
:markers="markerList" :include-points="includePoints"
style="height: 400px;flex: 1;align-items: stretch;display: flex;width: 750rpx;" @markertap="markerHandler"></map>
<button @click="handleScale(20)">放大</button>
<button @click="handleScale(3)">缩小</button>
<button @click="handleMove">移动到杭州</button>
</view>
</template>
<script>
export default {
data() {
return {
uMap: null,
scale: 3,
latitude: 30.257576,
longitude: 120.172346,
markerList: [{
"id": 18994,
"latitude": 30.66667,
"longitude": 104.06667,
"callout": {
"content": "成都",
"borderRadius": 4,
"color": "#666666",
"padding": 10,
"fontSize": 12,
"textAlign": "center",
"bgColor": "#FFFFFF",
"anchorX": 0,
"anchorY": 0,
"display": "ALWAYS"
}
}, {
"id": 18995,
"latitude": 30.257576,
"longitude": 120.172346,
"callout": {
"content": "杭州",
"borderRadius": 4,
"color": "#666666",
"padding": 10,
"fontSize": 12,
"textAlign": "center",
"bgColor": "#FFFFFF",
"anchorX": 0,
"anchorY": 0,
"display": "ALWAYS"
}
}, {
"id": 18998,
"latitude": 29.56667,
"longitude": 106.45,
"callout": {
"content": "重庆",
"borderRadius": 4,
"color": "#666666",
"padding": 10,
"fontSize": 12,
"textAlign": "center",
"bgColor": "#FFFFFF",
"anchorX": 0,
"anchorY": 0,
"display": "ALWAYS"
}
}],
includePoints: [{
"latitude": 30.66667,
"longitude": 104.06667
}, {
"latitude": 30.257576,
"longitude": 120.172346
}, {
"latitude": 29.56667,
"longitude": 106.45
}]
}
},
onReady() {
this.uMap = uni.createMapContext('uMap', this)
},
methods: {
handleMove() {
if (this.uMap) {
this.uMap.moveToLocation({
latitude: 30.257576,
longitude: 120.172346,
success: (res) => {
console.log('moveto', res)
}
})
}
},
handleScale(scale) {
this.scale = scale
}
}
}
</script>
<style>
</style>

- 发布:2022-07-07 16:39
- 更新:2023-07-27 14:54
- 阅读:995
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS Monterey 12.2
手机系统: Android
手机系统版本号: Android 12
手机厂商: 小米
手机机型: redmi k30s
页面类型: nvue
vue版本: vue2
打包方式: 离线
项目创建方式: CLI
CLI版本号: ^2.0.1-34920220630001
示例代码:
操作步骤:
1.手动放大地图某个点到不能再放大后,点击按钮移动到某个标记点后该标记点气泡消失,手动缩小后气泡又出现
2.点击放大按钮,点击移动到杭州按钮,杭州标记点气泡消失,点击缩小按钮后气泡又出现
1.手动放大地图某个点到不能再放大后,点击按钮移动到某个标记点后该标记点气泡消失,手动缩小后气泡又出现
2.点击放大按钮,点击移动到杭州按钮,杭州标记点气泡消失,点击缩小按钮后气泡又出现
预期结果:
放大或者缩小地图后气泡都存在
放大或者缩小地图后气泡都存在
实际结果:
放大地图后android气泡消失,缩小地图后又出现,ios正常
放大地图后android气泡消失,缩小地图后又出现,ios正常
bug描述:
nvue使用高德地图,放大地图后android 标记点气泡消失,ios正常,缩小后气泡又出现

