本文实例讲述了微信小程序使用地图组件实现检索（定位位置)周边的兴趣点功能。分享给大家供大家参考，具体如下：

声明

错误：页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题？

造成原因：在小程序地图组件的同一区域地图组件的视图层比普通的文本视图层要高，所以在真机会遮挡！

解决办法：将该文本视图采用封面视图，放在地图中。

感谢：感谢Lrj _已疏远指出问题！

效果图

实现方法

1.地图采用微信小程序提供的地图组件；

2.周边的数据坐标点通过高德地图提供的应用程序接口接口，获取定位位置的周边或者指定位置周边的数据。

WXML

view class=' map _ container ' map class=' map '经度=' { {经度}} '纬度=' { {纬度} } ' include-points=' { { points } } ' markers=' { { markers } } ' cover-view class=' map-tab-bar ' cover-view class=' map-tab-Li { { item。id==status '？active ' : ' ' } } ' bind tap=' GetType ' data-type=' { { item。id } } ' wx :键='在listid ' wx :周围，用于=' { {在列表周围} } ' { { item。name } }/cover-view/cover-view cover-view class=' map-tab-bar map-foot { { isShow ' ' : '地图-隐藏"}}"封面-视图类="地图-名称“{ name } }/封面-视图封面-视图类="地图-地址“{ address } }/封面-视图/封面-视图/地图/视图页面样式表。map _ container { width : 100%；高度： 100%;位置：固定；top : 0；底部： 0；左： 0；右： 0；}.地图{宽度： 100%；高度： 100%;}.map-tab-bar {位置：绝对；top : 0；左： 0；宽度： 100%;z指数： 1000；font-size : 0；背景-color : # fff；}.地图-隐藏{显示：无；}.map-foot { top : auto；底部： 0；padding: 0 10px }。地图名称{ height: 80rpx线高： 80 rpxfont-size : 35 rpx飞越：隐藏；}.地图地址{ height: 60rpx线高： 60 rpxfont-size : 25 rpx飞越：隐藏；}.地图-选项卡-李{显示：内嵌-块；宽度： 25%;飞越：隐藏；高度： 70rpx线高： 70 rpx文本对齐：中心；font-size : 30 rpxcolor: # 333}。地图-标签-李。活动{ color : # fff背景-颜色：浅绿色；边界半径： 5px}JS

var app=GetApp()；var AMAP=app。数据。AMAP；var key=app。数据。钥匙；页面({数据： {围绕列表： [{名称： })汽车服务，id: '010000' }，名称： '汽车销售，id: '020000' }，名称： '汽车维修，id: '030000' }，名称： '摩托车，id: '040000' }，名称： '餐饮，id: '050000' }，名称： '购物，id: '060000' }，名称： '生活，id: '070000' }，名称： '体育休闲，id: '080000' }，名称： '医疗保健，id: '090000' }，名称： '住宿，id: '100000' }，名称： '风景名胜，id: '110000' }，名称： '商务住宅，id: '120000' } ]，status:null，latitude: null，longitude: null，isShow: false，markers: []，points: []，location: ' '，name: ' '，address: '' }，onLoad: function () { //页面加载获取当前定位位置为地图的中心坐标var _ this=this wx。get location({ success(data){ if(data){ _ this。setdata({ latitude : data . latitude，longitude: data。经度，markers:[{ id:0，latitude :数据。纬度，经度：数据。经度，iconPath: '././src/images/ding.png '，宽度： 32，高度： 32 }]})；} } });}，getType(e) {//获取选择的附近关键词，同时更新状态这个。setdata({ status : e . CurrentTarget。数据集。type })这个。getarroud(e . CurrentTarget。数据集。关键字，例如CurrentTarget。数据集。类型)；}，getAround(关键字，类型){//通过关键词获取附近的点，只取前十个，同时保证十个点在地图中显示var _ this=thisvar myAmap=新Amap .AMapWX({ key : key })；我的地图。getpoiround({图标路径： '././src/images/blue.png '，iconPathSelected: '././src/images/ding.png '，querykeywords:关键字，querytypes:类型，位置： _ this。数据。位置，成功(数据){ if(数据。markers){ var markers=[]，points=[]；for(数据的变化值。标记){ if(值。id 9)中断；if(值。id==0){ _ this。setdata({ name :值。name，address: value.address，isShow: true })标记。push({ id: value.id，latitude: value.latitude，longitude: value。经度，title: value.name，iconPath: value.iconPath，width: 32，height: 32，points。push({ latitude :值。纬度，经度：值。经度})} _这个。setdata({ markers : markers，points 3360 points })})，fail : function(info){ wx。显示吐司({ title : info })} })})；总结

1.由于是移动端，所以人为限制只显示了9条周边数据，防止重叠部分太多。

2.添加指定位置的周边的方法—-添加一个输入，将给的关键字进行搜索，然后返回坐标，改变地图中心坐标。

3.改变中心坐标还有采用微信小程序自己的API(wx.chooseLocation)，改变地图中心坐标。参考：微信小程序实现地图路线规划

4.高德地图提供应用程序接口和微信小程序提供应用程序接口的优劣：、目前高德提供的应用程序接口返回数据很快，最少目前比微信小程序自己的快很多；、缺点也很明显就是由于是外部提供的，所以需要进行对应配置，麻烦；、微信小程序提供的应用程序接口优势就是属于本身，不用额外配置，如果以后优化了，更好。

实例：

使用高德地图提供的getInputtips界面搜索关键词和城市，返回坐标，然后更改地图的中心坐标。

//页面加载输入地址作为地图的中心坐标。//如果输入为：成都欧尚庭院mya map . getinputtips({关键词：‘欧尚庭院’、‘成都’、success(RES){ var tip=RES . tips[0]；var lo=tip.location.split('，')[0]；var la=tip.location.split('，')[1]；_this.setData({纬度： la，经度： lo，位置： tip.location，标记：[{ id : 0 0，纬度： la，经度： lo，图标路径： '././src/images/ding.png '，宽： 32，高： 32}]}})希望这篇文章对微信小程序的开发有所帮助。