欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

程序员文章站 2023-11-16 19:32:46
本文实例讲述了微信小程序map组件结合高德地图api实现wx.chooselocation功能。分享给大家供大家参考,具体如下: 声明 bug: 页面搜索返回的列表在真...

本文实例讲述了微信小程序map组件结合高德地图api实现wx.chooselocation功能。分享给大家供大家参考,具体如下:

声明

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

效果图

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

实现原理

通过高德地图的微信小程序开发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'}}">
  <cover-view bindtouchstart="bindsearch" wx:key="searchid" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">
  {{item.name}}
  </cover-view>
 </cover-view>
 </map>
</view>

wxss

.map-inputtips-input{
 height: 80rpx;
 line-height: 80rpx;
 width: 100%;
 box-sizing: border-box;
 font-size: 30rpx;
 padding: 0 10px;
 background-color: #fff;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 border-bottom:1px solid #c3c3c3;
}
.map-inputtips-input input{
 border: 1px solid #ddd;
 border-radius: 5px;
 height: 60rpx;
 line-height: 60rpx;
 width: 100%;
 box-sizing: border-box;
 padding: 0 5px;
 margin-top: 10rpx;
}
.map-box{
 margin: 0 10px;
 border-bottom:1px solid #c3c3c3;
 height: 80rpx;
 line-height: 80rpx;
}
.map-box:last-child{border: none;}
.map-search-list{
 position: fixed;
 top: 80rpx;
 left: 0;
 width: 100%;
 z-index: 1000;
 background-color: #fff;
}

js

const app = getapp();
const amap = app.data.amap;
const key = app.data.key;
page({
 data: {
 isshow: false,
 tips: {},
 longitude: '',
 latitude: '',
 markers: []
 },
 onload() {
 var _this = this;
 wx.getlocation({
  success: function(res) {
  if (res && res.longitude){
   _this.setdata({
   longitude: res.longitude,
   latitude: res.latitude,
   markers:[{
    id:0,
    longitude: res.longitude,
    latitude: res.latitude,
    iconpath: '../../src/images/ding.png',
    width:32,
    height:32
   }]
   })
  }
  }
 })
 },
 bindinput: function (e) {
 var _this = this;
 var keywords = e.detail.value;
 var myamap = new amap.amapwx({ key: key });
 myamap.getinputtips({
  keywords: keywords,
  location: '',
  success: function (res) {
  if (res && res.tips) {
   _this.setdata({
   isshow: true,
   tips: res.tips
   });
  }
  }
 })
 },
 bindsearch: function (e) {
 var keywords = e.target.dataset.keywords;
 var location = e.target.dataset.location.split(',');
 this.setdata({
  isshow: false,
  longitude: location[0],
  latitude: location[1],
  markers: [{
  id: 0,
  longitude: location[0],
  latitude: location[1],
  iconpath: '../../src/images/ding.png',
  width: 32,
  height: 32,
  anchor: { x: .5, y: 1 },
  label: {
   content: keywords,
   color: 'blue',
   fontsize: 12,
   borderradius: 5,
   bgcolor: '#fff',
   padding: 3,
   x: 0,
   y: -50,
   textalign: 'center'
  }
  }]
 })
 }
})

总结

1. 输入框事件获取关键字,通过关键字获取展示列表;

2. 列表选择事件,获取对应的location,并通过map组件的 markers 属性标记该坐标。

希望本文所述对大家微信小程序开发有所帮助。