<template>
<view style="height: 600rpx;width: 100%; position: relative;" id="map">
<map id="mapId" ref="mapref" style="width: 100%; height: 100%;" :layer-style='5' :show-location='true'
:circles="circles" :latitude="gpsAddressInfo.lat" :markers="markers" :longitude="gpsAddressInfo.lng"
@controltap="moveToLocation" :scale="scale" :controls="controls" @markertap="markertap">
</map>
</view>
</template>
this.mapContext = uni.createMapContext('mapId', this);
codeLiumou
- 发布：2025-03-26 15:31
- 更新：2026-01-16 17:11
- 阅读：211
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
HBuilderX类型： 正式
HBuilderX版本号： 4.45
手机系统： Android
手机系统版本号： Android 12
手机厂商： OPPO
手机机型： OPPO A93s
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
moveToLocation() {
this.mapContext.moveToLocation({
latitude: this.gpsAddressInfo.lat,
longitude: this.gpsAddressInfo.lng,
success: res => {
console.log('res', res)
},
fail: err => {}
});
},
moveToLocation() {
this.mapContext.moveToLocation({
latitude: this.gpsAddressInfo.lat,
longitude: this.gpsAddressInfo.lng,
success: res => {
console.log('res', res)
},
fail: err => {}
});
},预期结果：
回归到原始位置
回归到原始位置
实际结果：
纹丝不动
纹丝不动
bug描述：
触发@controltap，定位到自己所在的位置，界面没反应
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
2026-01-16 复测 vue3+安卓真机+腾讯地图无问题，如果仍有问题，请新开 issue 艾特我。
<template>
<view style="height: 600rpx;width: 100%; position: relative;" id="map">
<button @click="moveToLocation">go back</button>
<map id="mapId" ref="mapref" style="width: 100%; height: 100%;" :layer-style='5' :show-location='true'
:circles="circles" :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="markertap">
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.909,
longitude: 116.39742,
markers: [],
circles: []
}
},
onReady() {
this.mapContext = uni.createMapContext('mapId', this);
},
methods: {
markertap(res) {
console.log('markertap', res);
},
moveToLocation() {
const res = {
latitude: 39.909,
longitude: 116.39742,
}
this.mapContext.moveToLocation({
latitude: res.latitude,
longitude: res.longitude,
success: res => {
console.log('res', res)
},
fail: err => {}
});
},
}
}
</script>