https://developers.weixin.qq.com/miniprogram/dev/component/map.html
小程序文档使用方式实现
KeithTsui
- 发布：2022-03-10 23:17
- 更新：2023-11-15 16:45
- 阅读：2597
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 11.2.3
HBuilderX类型： 正式
HBuilderX版本号： 3.3.11
第三方开发者工具版本号： 1.05
基础库版本号： 2.22.1
项目创建方式： HBuilderX
操作步骤：
预期结果：
真机测试和模拟器运行结果一致
真机测试和模拟器运行结果一致
实际结果：
真机测试和模拟器运行结果不一致
真机测试和模拟器运行结果不一致
bug描述：
customCallout 自定义气泡，微信模拟器正常。真机测试拉夸的一批，自定义的气泡被压缩成了2像素的点。坑了我一天，一开始以为自己写错了~后来才发现是uniapp的问题。下面2张图第一张是运行到微信模拟器效果，第二张是运行到iphonex真机效果
KeithTsui (作者)
已解决：
<map id="map" style="width:100%;height:calc(100vh - 50px);" :show-location="true" :latitude="map.latitude" :longitude="map.longitude" :markers="map.markers" :enable-traffic="map.traffic" scale="14" @callouttap="fnOnCallOutTap">
<cover-view slot="callout">
<cover-view v-for="(item,index) in map.markers" :key="index" :marker-id="item.id">
<cover-view class="customCallout">
<cover-image src="/static/bubble.png" class="customCalloutAllow"></cover-image>
<cover-view class="customCallout-box">
<cover-view class="xui-info">
<cover-image src="/static/map-pointer.png" style="width:20px;height:20px;"></cover-image>
<cover-view class="xui-content xui-font-size-12" style="width:120rpx;">
<cover-view class="xui-content customCallout-title">快2 慢3</cover-view>
<cover-view class="xui-content customCallout-price">￥{{item.price}}/度</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
<cover-view></cover-view>
</cover-view>
</cover-view>
</map>
//设置初始变量值
return {
map:{
//默认坐标为北京天安门
mapObj: {},
latitude: 34.65774,
longitude: 112.3957,
traffic: false, //路况开关
markers: []
},
//后台取到数据后，使用JS数组拼接push到markers数组中，不要使用官方实例中的addMarkers方法，该方法针对callout和label
_this.map.markers.push({
id: 1,
latitude: 34.642506,
longitude: 112.380939,
powerName: '和昌中央城邦充电站',
price: '1.13',
alpha: 0,
customCallout: {
anchorY: 45,
anchorX: 0,
display: 'ALWAYS'
}
});
注意：
1、自定义气泡，不要用 addMarkers() 方法
2、cover-view和cover-image 标签样式很难调整和view不一样，且开发者工具中和真机样式区别很大
3、吐槽官方文档太乱了，本来很清晰的业务流程文档实例中写的一塌糊涂，写的很装逼！！建议看微信文档
DCloud_UNI_GSQ
微信小程序平台模拟器和真机表现区别的问题，需要反馈到微信小程序官方社区。文档“很装逼”的问题，希望具体说明一下，方便改进。
2022-03-14 17:41