uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示
uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示
产品分类:
uniapp/小程序/微信
PC开发环境操作系统:
Windows
PC开发环境操作系统版本号:
版本 Windows 10 教育版
版本号 20H2
安装日期 2021/5/8
操作系统内部版本 19042.928
体验 Windows Feature Experience Pack 120.2212.551.0
HBuilderX类型:
正式
HBuilderX版本号:
3.1.22
第三方开发者工具版本号:
1.05.2107090
基础库版本号:
2.17.0
项目创建方式:
HBuilderX
示例代码:
<!-- 地图定位 -->
<template>
<view class="">
<view class="" style="height: 750rpx; width: 750rpx;">
微信8.0.6可以显示标记点 微信8.0.7不显示
<map
id="map"
ref="map"
:scale="scale"
style="height: 750rpx; width: 750rpx;"
:latitude="targetLatitude"
:longitude="targetLongitude"
:markers="markers"
:enable-building="true"
:show-location="true"
></map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 定位纬度
latitude: 0,
// 定位经度
longitude: 0,
// 目标纬度
targetLatitude: 0,
// 目标经度
targetLongitude: 0,
// 标点列表
markers: [],
scale: 16 //缩放级别
};
},
watch: {
targetInfo(value) {
let obj = {
id: 1, //标记点id
clusterId: 1, //自定义点聚合簇效果时使用
latitude: value.lat, //纬度
longitude: value.lng, //经度
alpha: 1 //透明度 0-1
};
this.markers = [obj];
}
},
computed: {},
created() {},
mounted() {
this.isGetLocation();
},
methods: {
// 获取定位信息
getLocationInfo() {
uni.getLocation({
type: 'gcj02', //gcj02国测局坐标
success: res => {
console.log('res',res);
this.longitude = res.longitude;
this.latitude = res.latitude;
this.targetLatitude = res.latitude;
this.targetLongitude = res.longitude;
let obj = {
id: 1, //标记点id
clusterId: 1, //自定义点聚合簇效果时使用
latitude: res.latitude, //纬度
longitude: res.longitude, //经度
alpha: 1 //透明度 0-1
};
this.markers = [obj];
},
fail: (error) => {
console.log('error',error);
}
});
},
// 获取定位授权
getAuthorizeInfo(a = 'scope.userLocation') {
//1. uniapp弹窗弹出获取授权(地理,个人微信信息等授权信息)弹窗
var _this = this;
uni.authorize({
scope: a,
success() {
//1.1 允许授权
_this.getLocationInfo();
},
fail() {
//1.2 拒绝授权
console.log('你拒绝了授权,无法获得周边信息');
}
});
},
// 查看是否已经授权定位
isGetLocation(a = 'scope.userLocation') {
// 3. 检查当前是否已经授权访问scope属性,
var _this = this;
// #ifdef MP
uni.getSetting({
success(res) {
if (!res.authSetting[a]) {
//3.1 每次进入程序判断当前是否获得授权,如果没有就去获得授权,如果获得授权,就直接获取当前地理位置
_this.getAuthorizeInfo();
} else {
_this.getLocationInfo();
}
}
});
// #endif
// #ifdef H5
console.log('我是h5');
_this.getLocationInfo();
// #endif
}
}
};
</script>
操作步骤:
直接打开demo 同意获取定位 即可出现标记点
预期结果:
真机微信8.0.7版本、真机微信8.0.6版本、h5、微信开发者工具 标记正常显示;
实际结果:
真机微信8.0.6版本、h5、微信开发者工具 标记正常显示;真机微信8.0.7版本 标记点无法正常显示;
bug描述:
代码在真机微信版本8.0.7 地图组件map 的 markers 标记点无法正常显示;代码在微信开发者工具调试中可以正常显示,h5也可以正常显示。真机微信版本8.0.7以下版本 如8.0.6可以正常显示;

更多关于uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html
问题已解决 8.0.7版本 设置了clusterId 点聚合簇id 会导致自定义 气泡 callout失效
更多关于uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的微信8.0.7版本与uni-app地图组件的兼容性问题。从你的描述和代码来看,问题出现在微信8.0.7版本中markers标记点无法显示,而在其他环境均正常。
分析你的代码,markers数据结构和赋值逻辑正确,问题可能源于:
- 微信8.0.7版本对地图组件渲染机制的变更
- markers数据更新的时机问题
建议尝试以下解决方案:
方案一:强制重新渲染地图
// 在设置markers后添加
this.$nextTick(() => {
this.$refs.map.updateLayout()
})
方案二:延迟设置markers
setTimeout(() => {
let obj = {
id: 1,
clusterId: 1,
latitude: res.latitude,
longitude: res.longitude,
alpha: 1
};
this.markers = [obj];
}, 100);
方案三:添加完整的marker属性
let obj = {
id: 1,
clusterId: 1,
latitude: res.latitude,
longitude: res.longitude,
alpha: 1,
iconPath: '/static/icon.png', // 确保图标路径正确
width: 30,
height: 30
};

