前言:公司业务需要.使用uni-app写了一套使用地图相关内容的业务.然后发现在多端兼容的情况下. 有太多太多的坑了..在此处不定时更新分享. PS:这些坑并不全是uni-app造成的,大部分是由于平台不同兼容性不同造成的.微信小程序的坑最多,造成原因就是微信小程序自身的坑.
一.使用点聚合相关的坑在此文章中查看 juejin.cn/post/711672… .
----------------------------分隔线----------------------------------------
二.【微信小程序的安卓端】marker点击事件无效的BUG.
BUG形成原因:微信小程序的平台兼容性问题.图标label层级高于marker.只要有label点击marker就无法触发.
问题解决方式:为label和marker同时绑定的点击事件.
----------------------------分隔线----------------------------------------
三.小程序端与APP端往地图上打标记方式的差异.
【微信小程序-安卓】: 不使用聚合时,调用API-map.addMarkers无效,无法往地图中打点.
【微信小程序-苹果】: 使用聚合时,调用API-map.addMarkers无效,无法往地图中打点.
兼容处理方式:
【小程序】:使用markers属性往地图上添加标记.
文档地址:uniapp.dcloud.net.cn/component/m…
【APP端】:调用API-map.addMarkers往地图上打标记.
文档地址:uniapp.dcloud.net.cn/api/locatio…
----------------------------分隔线----------------------------------------
四.使用双色线来车辆行驶的过程.
问题1:小程序只能使用polyline属性设置双色线.安卓上使用同样的方式,无法设置线的颜色.并且绿色长度要跟随车辆移动,每次更新线都是重绘,线在屏幕中会狂闪.
此处改用彩虹线来解决.彩虹线相关文档,得查看微信小程序官方文档.
----------------------------分隔线----------------------------------------
五.车辆驶过,留下轨迹的效果.
(图1)
问题1:【APP端】:当轨迹更新时,会清空掉车辆与起点标记的图标,变成图2这样.
(图2)
造成原因:标记点采用了调用API的方式添加uniMap.addMarkers,此处必须改为与轨迹(polyling)相同的方式,<map>标签直接赋值的方式添加.
----------------------------分隔线----------------------------------------
六.IOS【APP端】无法显示地图图标.
造成原因:IOS-APP图片格式不能是svg格式.
----------------------------分隔线----------------------------------------
三个月内不时更新.
