微信小程序使用map組件實現(xiàn)檢索(定位位置)周邊的POI功能示例

更新時間：2019年01月23日 08:41:50 作者：Rattenking

這篇文章主要介紹了微信小程序使用map組件實現(xiàn)檢索(定位位置)周邊的POI功能,涉及微信小程序基于map組件與高德地圖PAI接口的定位操作相關使用技巧,需要的朋友可以參考下

本文實例講述了微信小程序使用map組件實現(xiàn)檢索(定位位置)周邊的POI功能。分享給大家供大家參考，具體如下：

聲明

bug：頁面頂部分類【汽車服務、汽車銷售等】列表和頁腳的詳細地址在真機測試是會出現(xiàn)不顯示問題？

造成原因：在小程序map組件的同一區(qū)域，map組件的視圖層比普通的文本視圖層要高，所以在真機會遮擋！

解決辦法：將該文本視圖采用cover-view，放在map中。

感謝：感謝Lrj_estranged指出問題！

效果圖

實現(xiàn)方法

1. 地圖采用微信小程序提供的map組件；

2. 周邊的數(shù)據(jù)坐標點通過高德地圖提供的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: '汽車服務',
    id: '010000'
   },
   {
    name: '汽車銷售',
    id: '020000'
   },
   {
    name: '汽車維修',
    id: '030000'
   },
   {
    name: '摩托車',
    id: '040000'
   },
   {
    name: '餐飲',
    id: '050000'
   },
   {
    name: '購物',
    id: '060000'
   },
   {
    name: '生活',
    id: '070000'
   },
   {
    name: '體育休閑',
    id: '080000'
   },
   {
    name: '醫(yī)療保健',
    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) {//獲取選擇的附近關鍵詞，同時更新狀態(tài)
  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})
   }
  })
 }
});

總結(jié)

1. 由于是移動端，所以人為限制只顯示了9條周邊數(shù)據(jù)，防止重疊部分太多。

2. 添加指定位置的周邊的方法—-添加一個input，將給的關鍵字進行搜索，然后返回坐標，改變地圖中心坐標。

3. 改變中心坐標還有采用微信小程序自己的API（wx.chooseLocation），改變地圖中心坐標。參考：微信小程序?qū)崿F(xiàn)map路線規(guī)劃

4. 高德地圖提供API和微信小程序提供API的優(yōu)劣：①、目前高德提供的API返回數(shù)據(jù)很快，最少目前比微信小程序自己的快很多；②、缺點也很明顯就是由于是外部提供的，所以需要進行對應配置，麻煩；③、微信小程序提供的API優(yōu)勢就是屬于本身，不用額外配置，如果以后優(yōu)化了，更好。

實例：

用高德地圖提供的 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
   }]
  })
 }
})

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章: