<template>
<view class="content">
<map
id="map"
class="map"
:show-location="true"
:latitude="state.latitude"
:longitude="state.longitude"
theme="satellite"
></map>
</view>
</template>
<script setup lang='ts'>
import { reactive, getCurrentInstance, ref, onMounted, unref } from 'vue'
const state = reactive({
latitude: 23.099994,
longitude: 113.324520,
})
const instance = getCurrentInstance()
const mapContext = ref<UniApp.MapContext>(null as unknown as UniApp.MapContext)
const addMarkers = () => {
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers:any[] = []
positions.forEach((p, i) => {
console.log(i)
markers.push(
Object.assign({}, {
id: i + 1,
iconPath: '/static/home/1.png',
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff',
content: `label ${i + 1}`
}
}, p)
)
})
unref(mapContext).addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
}
onMounted(async () => {
mapContext.value = uni.createMapContext("map", instance)
unref(mapContext).initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
})
unref(mapContext).on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
})
addMarkers()
})
</script>
<style lang="scss" scoped>
.content {
.map{
height: 100vh;
width: 100vw;
}
}
</style>
- 发布:2024-01-25 11:47
- 更新:2024-08-06 10:20
- 阅读:516
【报Bug】vue3 使用 uni.createMapContext("map", instance) 后,后续的api在h5不生效,(微信小程序上生效)(腾讯地图)
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 17763.1
HBuilderX类型: 正式
HBuilderX版本号: 3.7.3
浏览器平台: Chrome
浏览器版本: 118+
项目创建方式: HBuilderX
示例代码:
操作步骤:
。
。
预期结果:
h5上正常显示,控制台上打印出信息
h5上正常显示,控制台上打印出信息
实际结果:
啥也没有
啥也没有
bug描述:
如图,h5页面上无标点,且控制台并没有打印出预期的信息