本文實例講述了微信小程序使用map組件實現檢索(定位位置)周邊的POI功能。分享給大家供大家參考，具體如下：
聲明
bug： 頁面頂部分類【汽車服務、汽車銷售等】列表和頁腳的詳細地址在真機測試是會出現不顯示問題？
造成原因：在小程序map組件的同一區域，map組件的視圖層比普通的文本視圖層要高，所以在真機會遮擋！
解決辦法：將該文本視圖采用cover-view，放在map中。
感謝： 感謝Lrj_estranged指出問題！
效果圖
實現方法
1. 地圖采用微信小程序提供的map組件；
2. 周邊的數據坐標點通過高德地圖提供的API接口，獲取定位位置的周邊或者指定位置周邊的數據。
WXML
<view class="map_container"> <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'> <cover-view class="map-tab-bar"> <cover-viewclass="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</cover-view> </cover-view> <cover-viewclass="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}"> <cover-viewclass="map-name">{{name}}</cover-view> <cover-viewclass="map-address">{{address}}</cover-view> </cover-view> </map></view>WXSS
.map_container{ width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}.map{ width: 100%; height: 100%;}.map-tab-bar{ position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; font-size: 0; background-color: #fff;}.map-hide{display: none;}.map-foot{ top: auto; bottom: 0; padding: 0 10px;}.map-name{ height: 80rpx; line-height: 80rpx; font-size: 35rpx; overflow: hidden;}.map-address{ height: 60rpx; line-height: 60rpx; font-size: 25rpx; overflow: hidden;}.map-tab-li{ display: inline-block; width: 25%; overflow: hidden; height: 70rpx; line-height: 70rpx; text-align: center; font-size: 30rpx; color: #333;}.map-tab-li.active{color: #fff;background-color: lightgreen;border-radius: 5px;}JS
var app = getApp();var amap = app.data.amap;var key = app.data.key;Page({ data: { aroundList: [ { name: '汽車服務', id: '010000' }, { name: '汽車銷售', id: '020000' }, { name: '汽車維修', id: '030000' }, { name: '摩托車', id: '040000' }, { name: '餐飲', id: '050000' }, { name: '購物', id: '060000' }, { name: '生活', id: '070000' }, { name: '體育休閑', id: '080000' }, { name: '醫療保健', id: '090000' }, { name: '住宿', id: '100000' }, { name: '風景名勝', id: '110000' }, { name: '商務住宅', id: '120000' } ], status:null, latitude: null, longitude: null, isShow: false, markers: [], points: [], location: '', name:'', address: '' }, onLoad: function () { // 頁面加載獲取當前定位位置為地圖的中心坐標 var _this = this; wx.getLocation({ success(data) { if (data) { _this.setData({ latitude: data.latitude, longitude: data.longitude, markers:[{ id:0, latitude: data.latitude, longitude: data.longitude, iconPath: '../../src/images/ding.png', width: 32, height: 32 }] }); } } }); }, getType(e) {//獲取選擇的附近關鍵詞，同時更新狀態 this.setData({ status: e.currentTarget.dataset.type}) this.getAround(e.currentTarget.dataset.keywords,e.currentTarget.dataset.type); }, getAround(keywords,types) {//通過關鍵詞獲取附近的點，只取前十個，同時保證十個點在地圖中顯示 var _this = this; var myAmap = new amap.AMapWX({ key: key }); myAmap.getPoiAround({ iconPath: '../../src/images/blue.png', iconPathSelected: '../../src/images/ding.png', querykeywords: keywords, querytypes: types, location: _this.data.location, success(data) { if (data.markers) { var markers = [], points = []; for (var value of data.markers) { if (value.id > 9) break; if(value.id == 0){ _this.setData({ name: value.name, address: value.address, isShow: true }) } markers.push({ id: value.id, latitude: value.latitude, longitude: value.longitude, title: value.name, iconPath: value.iconPath, width: 32, height: 32, anchor: { x: .5, y: 1 }, label: { content: value.name, color: 'green', fontSize: 12, borderRadius: 5, bgColor: '#fff', padding: 3, x: 0, y: -50, textAlign: 'center' } }); points.push({ latitude: value.latitude, longitude: value.longitude }) } _this.setData({ markers: markers, points: points }) } }, fail: function (info) { wx.showToast({title: info}) } }) }});總結
1. 由于是移動端，所以人為限制只顯示了9條周邊數據，防止重疊部分太多。
2. 添加指定位置的周邊的方法—-添加一個input，將給的關鍵字進行搜索，然后返回坐標，改變地圖中心坐標。
3. 改變中心坐標還有采用微信小程序自己的API（wx.chooseLocation），改變地圖中心坐標。參考：微信小程序實現map路線規劃
4. 高德地圖提供API和微信小程序提供API的優劣：①、目前高德提供的API返回數據很快，最少目前比微信小程序自己的快很多；②、缺點也很明顯就是由于是外部提供的，所以需要進行對應配置，麻煩；③、微信小程序提供的API優勢就是屬于本身，不用額外配置，如果以后優化了，更好。
實例：
用高德地圖提供的 getInputtips 接口，搜索關鍵字和城市，返回的坐標，然后改變地圖中心坐標。
// 頁面加載以輸入地址為地圖的中心坐標// 假如輸入的是：成都 歐尚庭院myAmap.getInputtips({ keywords: '歐尚庭院', city: '成都', success(res) { var tip = res.tips[0]; var lo = tip.location.split(',')[0]; var la = tip.location.split(',')[1]; _this.setData({ latitude: la, longitude: lo, location: tip.location, markers: [{ id: 0, latitude: la, longitude: lo, iconPath: '../../src/images/ding.png', width: 32, height: 32 }] }) }})希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答
