微信小程序----map組件實現檢索【定位位置】周邊的POI

效果圖

實現方法

1. 地圖采用微信小程序提供的map組件；
2. 周邊的數據坐標點通過高德地圖提供的API接口，獲取定位位置的周邊或者指定位置周邊的數據。

WXML

<view class="map_container">
  <view class="map-tab-bar">
    <view class="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</view>
  </view>
  <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'></map>
  <view class="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}">
    <view class="map-name">{{name}}</view>
    <view class="map-address">{{address}}</view>
  </view>
</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的優劣：1、目前高德提供的API返回數據很快，最少目前比微信小程序自己的快很多；2、缺點也很明顯就是由於是外部提供的，所以需要進行對應配置，麻煩；3、微信小程序提供的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
      }]
    })
  }
})