uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)
uni-app vue3 使用 uni.createMapContext(“map”, instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)
| 类别 | 信息 |
|---|---|
| 产品分类 | uniapp/H5 |
| PC开发环境 | Windows |
| 操作系统版本 | 17763.1 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.7.3 |
| 浏览器平台 | Chrome |
| 浏览器版本 | 118+ |
| 项目创建方式 | HBuilderX |
示例代码:
<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>
操作步骤:
预期结果:
- h5上正常显示,控制台上打印出信息
实际结果:
- 啥也没有
bug描述:
- 如图,h5页面上无标点,且控制台并没有打印出预期的信息

更多关于uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
您好,h5暂不支持addMarkers方法,可使用map组件的markers属性替代
更多关于uni-app vue3 使用 uni.createMapContext("map", instance) 后,后续的API在H5不生效(微信小程序上生效)(腾讯地图)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
使用map组件的markers属性替代,可以添加,但是怎么清除,this.markers = [] ,也没有清除。越来越多,我是10秒添加一次marker,添加前清除,清除不掉
在 uni-app 中使用 uni.createMapContext("map", instance) 创建地图上下文后,如果在 H5 平台上无法正常使用相关 API,而在微信小程序上可以正常工作,这通常是因为 H5 平台和微信小程序平台对地图 API 的实现方式不同。
原因分析
在微信小程序中,uni.createMapContext 使用的是微信小程序原生的地图组件,而在 H5 平台上,uni-app 使用的是腾讯地图的 Web API。两者在实现上有一些差异,可能会导致某些 API 在 H5 平台上不生效。
解决方案
-
检查地图组件的初始化: 确保地图组件在 H5 平台上正确初始化。你可以通过
uni.createMapContext创建地图上下文后,打印出上下文对象,检查是否有异常。const mapContext = uni.createMapContext("map", this); console.log(mapContext); -
使用腾讯地图 Web API: 如果在 H5 平台上
uni.createMapContext的某些 API 不生效,可以考虑直接使用腾讯地图的 Web API 来实现相应的功能。腾讯地图的 Web API 提供了丰富的地图操作功能。例如,获取地图实例并设置中心点:
const map = new qq.maps.Map(document.getElementById('map'), { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 13 }); -
平台判断: 在代码中根据平台进行判断,针对不同的平台使用不同的实现方式。
export default { mounted() { if (process.env.VUE_APP_PLATFORM === 'h5') { // H5 平台使用腾讯地图 Web API this.initTencentMap(); } else { // 其他平台使用 uni.createMapContext this.initMiniProgramMap(); } }, methods: { initTencentMap() { const map = new qq.maps.Map(document.getElementById('map'), { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 13 }); }, initMiniProgramMap() { const mapContext = uni.createMapContext("map", this); mapContext.moveToLocation({ latitude: 39.916527, longitude: 116.397128 }); } } }

