uni-app开发微信小程序 - 地图,安卓端无法加载出marker标记点

个人使用uni-app开发微信小程序

使用map组件时,遇到了安卓和iOS端小程序不兼容的问题

首先,map组件的markers中必须有id字段

其次,向markers中增加字段时,安卓端不支持直接向data中的数据push新增点位

如下代码,在iOS的小程序端没有问题,安卓的小程序端将不渲染markers

this.markers.push({
    id: 3,
    latitude: 39.909,
    longitude: 116.39742,
})

做如下修改

let newMarkers = this.markers
newMarkers.push({
    id: 3,
    latitude: 39.909,
    longitude: 116.39742,
})
this.markers = newMarkers

这样就可以兼容安卓的小程序端

感谢Dcloud社区:发布小程序后map组件下marker在安卓微信中无法点击 - DCloud问答发布小程序后map组件下marker在安卓微信中无法点击 - 如题,uni-app发布小程序后,map组件下的marker在安卓微信中无法点击(无法响应@markertap),在微信开发者工具和ios版微信中都正常。每个marker均已设置id。求大神们帮助一下,感激不尽。https://ask.dcloud.net.cn/question/75392

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app是一款基于Vue.js框架的跨平台开发工具,可以同时开发微信小程序、H5、App等多个平台的应用。在uni-app中,我们可以很方便地使用地图组件标记。 首先,我们需要引入uni-app官方提供的地图组件,在页面的json文件中添加以下代码: ``` { "usingComponents": { "uni-map": "@dcloudio/uni-map/uni-map" } } ``` 然后,在需要使用地图的页面中,在template中添加以下代码: ``` <template> <view> <uni-map :longitude="longitude" :latitude="latitude" :markers="markers" :include-points="true" ></uni-map> </view> </template> ``` 在script中,我们需要定义地图的经纬度和标记的数据: ``` <script> export default { data() { return { longitude: 113.324520, latitude: 23.099994, markers: [{ id: 1, longitude: 113.324520, latitude: 23.099994, title: '标记1', iconPath: '/static/marker.png', width: 30, height: 30 }, { id: 2, longitude: 113.326520, latitude: 23.099994, title: '标记2', iconPath: '/static/marker.png', width: 30, height: 30 }] } } } </script> ``` 我们可以通过设置longitude和latitude来指定地图的中心,通过markers来设置标记的位置、标题、图标等信息。iconPath需要提前准备好对应的图标文件。 最后,在地图组件上设置:include-points="true",可以使得地图自动包含所有标记,确保能够显示所有标记。 以上就是使用uni-app来在微信小程序标记的方法。通过引入uni-app提供的地图组件,结合相关的属性和数据即可实现地图标记功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值