微信小程序----map组件实现（高德地图API实现wx.chooseLocation（OBJECT））

最新推荐文章于 2025-04-05 11:06:29 发布

原创

最新推荐文章于 2025-04-05 11:06:29 发布 · 901 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用高德地图API实现`wx.chooseLocation(OBJECT)`功能。针对页面搜索返回列表在真机测试时被map组件遮挡的问题，提出了使用`cover-view`组件的解决方案。并提供了实现原理、WXML、WXSS和JS代码示例，以及相关DEMO和资源链接。

微信小程序----map组件实现（高德地图API实现wx.chooseLocation（OBJECT））

声明

bug：页面搜索返回的列表在真机测试是会出现不显示问题？
造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！
解决办法：将该文本视图采用cover-view，放在map中。
感谢：感谢Lrj_estranged指出问题！

效果图

这里写图片描述

实现原理

通过高德地图的微信小程序开发API（getInputtips），实现关键词获取对应提示列表，同时返回location。

WXML

<view class="map-inputtips-input">
  <input bindinput="bindInput" placeholder="搜索" focus="true" />
</view>

<view class="map_container">
  <map class="map" latitude='{
      
      {
      
      latitude}}' longitude='{
      
      {
      
      longitude}}' markers='{
      
      {
      
      markers}}'>
    <cover-view class="map-search-list {
      
      {
      
      isShow ? '' : 'map-hide'}}">