uni-app 中集成高德地图

在使用uni-app集成高德地图的过程中，面临了多种挑战。首先，在搜索如何将高德地图引入uni-app时，发现网上答案多样，主要是关于如何引入高德地图的SDK。然而，注意到官方提供的小程序SDK功能有限，只包含天气、位置等，缺少如点聚合等高级功能。因此，选择利用uni-app的web-view组件，可以直接调用JS API，实现页面渲染。但引入web-view后，面临的问题是HTML页面层级最高，会覆盖整个页面。解决方法是在创建web-view页面时，调整页面的高度、上边距和底部边距，避免覆盖现象。

在实现点聚合功能时，发现登录App后获取当前位置并加载marker点信息，异步请求后台数据后，进行聚合操作。在处理行政边界查询时，发现无法通过输入完整地址（如“江苏省南京市玄武区”）来搜索，只能使用adcode表示。在重新查询某个区域信息时，需清除地图上的点并重新渲染。解决地图上聚合点在缩放后重新渲染的问题，关键在于使用`cluster.removeMarkers(markers);`而不是`map.remove(markers);`来清除标记点。

在解决web-view和Vue页面间的通信问题时，发现直接使用`uni.postMessage(OBJECT)`无法实现在页面切换时接收参数，而需要通过页面生命周期结束时接收。尝试了多种方法后，最终发现使用`document.addEventListener('UniAppJSBridgeReady', function() {})`并结合页面切换机制，能够实现在页面切换时接收参数。

在面对Vue页面向web-view传参时，通过URL方式将参数传递给web-view页面，并在页面加载时通过`getquery('data')`接收参数。若不想跳转页面只进行单向传参，使用`uni.postMessage(OBJECT)`在页面切换时同样能接收数据。

创建web-view页面时遇到的问题是页面加载延迟导致的闪屏问题。尝试修改延迟时间或使用v-if判断等方法，但问题依然存在。后来通过H5+方法优化，先加载页面并隐藏web-view，切换到高德地图页面时再显示，解决了闪频问题，但仍存在地图背景切换时的不友好现象。考虑将高德地图样式下载为静态资源引入，但未找到下载按钮。一种临时解决方案是通过定时器检测变量加载地图点。

您可能感兴趣问答

Collapsible

热门标签

热点问答