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

本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能。分享给大家供大

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

声明

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'}}">
 <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 属性标记该坐标。

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

微信小程序 map组件 高德地图 API wx.chooseLocation