本文實(shí)例講述了微信小程序使用map組件實(shí)現(xiàn)檢索(定位位置)周邊的POI功能。分享給大家供大家參考，具體如下：
聲明
bug： 頁(yè)面頂部分類(lèi)【汽車(chē)服務(wù)、汽車(chē)銷(xiāo)售等】列表和頁(yè)腳的詳細(xì)地址在真機(jī)測(cè)試是會(huì)出現(xiàn)不顯示問(wèn)題？
造成原因：在小程序map組件的同一區(qū)域，map組件的視圖層比普通的文本視圖層要高，所以在真機(jī)會(huì)遮擋！
解決辦法：將該文本視圖采用cover-view，放在map中。
感謝： 感謝Lrj_estranged指出問(wèn)題！
效果圖
實(shí)現(xiàn)方法
1. 地圖采用微信小程序提供的map組件；
2. 周邊的數(shù)據(jù)坐標(biāo)點(diǎn)通過(guò)高德地圖提供的API接口，獲取定位位置的周邊或者指定位置周邊的數(shù)據(jù)。
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: '汽車(chē)服務(wù)', id: '010000' }, { name: '汽車(chē)銷(xiāo)售', id: '020000' }, { name: '汽車(chē)維修', id: '030000' }, { name: '摩托車(chē)', id: '040000' }, { name: '餐飲', id: '050000' }, { name: '購(gòu)物', id: '060000' }, { name: '生活', id: '070000' }, { name: '體育休閑', id: '080000' }, { name: '醫(yī)療保健', id: '090000' }, { name: '住宿', id: '100000' }, { name: '風(fēng)景名勝', id: '110000' }, { name: '商務(wù)住宅', id: '120000' } ], status:null, latitude: null, longitude: null, isShow: false, markers: [], points: [], location: '', name:'', address: '' }, onLoad: function () { // 頁(yè)面加載獲取當(dāng)前定位位置為地圖的中心坐標(biāo) 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) {//獲取選擇的附近關(guān)鍵詞，同時(shí)更新?tīng)顟B(tài) this.setData({ status: e.currentTarget.dataset.type}) this.getAround(e.currentTarget.dataset.keywords,e.currentTarget.dataset.type); }, getAround(keywords,types) {//通過(guò)關(guān)鍵詞獲取附近的點(diǎn)，只取前十個(gè)，同時(shí)保證十個(gè)點(diǎn)在地圖中顯示 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}) } }) }});總結(jié)
1. 由于是移動(dòng)端，所以人為限制只顯示了9條周邊數(shù)據(jù)，防止重疊部分太多。
2. 添加指定位置的周邊的方法―-添加一個(gè)input，將給的關(guān)鍵字進(jìn)行搜索，然后返回坐標(biāo)，改變地圖中心坐標(biāo)。
3. 改變中心坐標(biāo)還有采用微信小程序自己的API（wx.chooseLocation），改變地圖中心坐標(biāo)。參考：微信小程序?qū)崿F(xiàn)map路線規(guī)劃
4. 高德地圖提供API和微信小程序提供API的優(yōu)劣：①、目前高德提供的API返回?cái)?shù)據(jù)很快，最少目前比微信小程序自己的快很多；②、缺點(diǎn)也很明顯就是由于是外部提供的，所以需要進(jìn)行對(duì)應(yīng)配置，麻煩；③、微信小程序提供的API優(yōu)勢(shì)就是屬于本身，不用額外配置，如果以后優(yōu)化了，更好。
實(shí)例：
用高德地圖提供的 getInputtips 接口，搜索關(guān)鍵字和城市，返回的坐標(biāo)，然后改變地圖中心坐標(biāo)。
// 頁(yè)面加載以輸入地址為地圖的中心坐標(biāo)// 假如輸入的是：成都 歐尚庭院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 }] }) }})希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
