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

微信小程序----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 {
      {