微信小程序地图组件结合高德地图应用程序接口实现wx.chooseLocation功能示例

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

声明

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

效果图

实现原理

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

WXML

视图类=' map-input ttips-input ' input bind input=' bind input '占位符='搜索focus=' true '/view view class=' map _ container ' map class=' map ' latitude=' { { latitude } } '经度=' { {经度} } '标记=' { { markers } } ' cover-view class=' map-Search-list ' { { isShow ' ' : ' map-hide ' } } ' cover-view bindtuchstart=' BindSearch ' wx : key=' Search id ' data-keywords=' { { item。name } } '数据位置=' { { item。位置} } ' class=' map-box ' wx : for=' { { tips } } ' { { item。名称} }/封面视图/封面视图/地图/视图。地图-输入ttips-输入{ height : 80 rpx线高： 80 rpx宽度： 100%;盒子尺寸：边框盒子；font-size : 30 rpxpadding: 0 10px背景-color : # fff；位置：固定；top : 0；左： 0；z指数： 1000；边框-底部：1px实心# c3c3c3}。地图输入ttips输入输入{边框： 1px实心# DDD；边界半径： 5px高度： 60rpx线高： 60 rpx宽度： 100%;盒子尺寸：边框盒子；padding: 0 5px边距-top : 10 rpx；}.地图框{ margin : 0 10pxborder-bottom :1 px实心# c3c3c3height: 80rpx线高： 80 rpx}.地图框：最后一个孩子{边框：无；}.地图-搜索-列表{位置：固定；top : 80 rpxleft : 0；宽度： 100%;z指数： 1000；背景-color : # fff；}JS

const app=GetApp()；const AMAP=app。数据。AMAP；const key=app。数据。钥匙；page({ data : { is show : false，tips : } }，longitude: ' '，latitude: ' '，markers: [] }，OnLoad(){ var _ this=this；wx。GetLocation({ success : function(RES){ if(RES RES。经度){ _ this . setdata({ 0经度：分辨率。经度，纬度：分辨率。纬度，标记：[{ id:0，经度：分辨率。经度，纬度：分辨率。纬度，iconPath: '././src/images/ding.png '，宽度：32，高度：32 }]})}))，bindInput:函数(e){ var _ this=this；定义变量关键字细节。价值；var myAmap=新Amap .AMapWX({ key : key })；我的地图。getinputtips({关键字：关键字，位置： ' '，成功：函数(RES){ if(RES . tips){ _ this。setdata({ isshow : true，tips : RES . tips })；} } }) }，bindSearch:函数{ var关键字=e . target。数据集。关键词；可变位置=目标。数据集。位置。split('，')；this.setData({ isShow: false，经度：位置[0],纬度：位置[1],标记： [{ id: 0，经度：位置[0],纬度：位置[1]，图标路径： '././src/images/ding.png '，width: 32，height: 32，anchor: { x:5，y: 1 }，label: { content:关键字，color: 'blue '，fontSize: 12，borderRadius: 5，bgColor: '#fff '，padding: 3，x 3:y 333:总结

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

2.列表选择事件，获取对应的位置，并通过地图组件的标记属性标记该坐标。

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