獲得高德地圖使用者Key

沒有申請key需要先申請，進入高德開發平臺 lbs.amap.com/ ， 在 開發指南 -> 獲取key 中有詳細操作步驟，在 控制檯 -> 應用管理 -> 我的應用中可以檢視我們建立的key。【相關學習推薦：】

我們可以把key封裝在起來，這樣就不用每次都找了，在 lib資料夾下新建一個 config.js 檔案

var config = {
  key: "你的key"
}
module.exports.config = config;

在js裡匯入 高德的js和key就可以呼叫高德地圖api了

var amapFile = require('../../lib/amap-wx.130.js'); //高德js
var config = require('../../lib/config.js'); //參照我們的組態檔

獲得當前位置

建立高德地圖範例並命名為myAmapFun

var key = config.config.key;
var myAmapFun = new amapFile.AMapWX({
    key: key
});

呼叫 getRegeo 方法

myAmapFun.getRegeo({
    success: (data) => {
        //儲存位置的描述資訊（ longitude經度 latitude緯度 和位置資訊 ）
        let textData = {};
        textData.name = data[0].name;
        textData.desc = data[0].desc
        //將獲取的資訊儲存
        this.setData({
          textData: textData,
          longitude: data[0].longitude,
          latitude: data[0].latitude,
          // 給該經度緯度加上icon做標記，並調節大小
          markers: [{
            latitude: data[0].latitude,
            longitude: data[0].longitude,
            height: 30,
            width: 35,
            iconPath: '../../imgs/locationIcon/site1.png'
          }]
        })
      },
      fail: function(info){
        console.log("get Location fail");
      }    
    });

我們可以看下輸出成功的data，裡面的資訊我們根據自己的需要取

在wxml檔案中將地圖顯示出來，這邊設定的是寬度100%，高度400px, scale是地圖的縮放比例

<view class="map_container">
  <map class="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location="true" markers="{{markers}}">
  </map>
</view>
<view class="map_text">
  <text class="h1">{{textData.name}}</text>
  <text>{{textData.desc}}</text>
</view>

紅色的標記點就是markers的資料；藍色的標記點是show-location="true"展示的，但是真機預覽就沒有了

獲取附近的點,只取前十個

data: {
    # 當前位置經度
    longitude: "",
    # 當前位置緯度
    latitude: "",
    # 獲取位置的標記資訊
    markers: [],
    # 獲取位置的位置資訊
    poisdatas : [],
    # 簡單展示資訊使用的
    textData: {}
}

呼叫高德地圖的getPoiAround介面根據關鍵字獲取附近資訊

get_current_PoiAround(){
    var key = config.config.key;
    var myAmapFun = new amapFile.AMapWX({
      key: key
    });
    // getRegeo 獲得當前位置資訊（上面有用到過這個方法）
    myAmapFun.getRegeo({
      success: (data) => {
        let textData = {};
        textData.name = data[0].name;
        textData.desc = data[0].desc
        this.setData({
          textData: textData,
          longitude: data[0].longitude,
          latitude: data[0].latitude,
        })
      },
      fail: function(info){
        console.log("get Location fail");
      }    
    });
    // 通過關鍵詞獲取附近的點
    myAmapFun.getPoiAround({
      // 改變icon圖示的樣式，點選前和點選後的我都暫時設成blue.svg， 如果不設定的話，預設就是一個紅色的小圖示
      iconPath: '../../icon/keshan/blue.svg',
      iconPathSelected: '../../icon/keshan/blue.svg',
      // 搜尋的關鍵字（POI分類編碼），在官方檔案https://lbs.amap.com/api/javascript-api/download/ 可以下載檢視
      querykeywords: '購物',
      querytypes: '060100',
      success: (data) => {
        const markers = data.markers;
        const poisdatas = data.poisData;
        let markers_new = []
        markers.forEach((item, index) => {
          // 只取10個點，超過就continue了，forEach是不能使用break和continue關鍵字的
          if( index >= 10 ){
            return;
          }
          // 將我們需要的markers資料重新整理一下存入markers_new中
          markers_new.push({
            id: item.id,
            width: item.width,
            height: item.height,
            iconPath: item.iconPath,
            latitude: item.latitude,
            longitude: item.longitude,
            // 自定義標記點上方的氣泡視窗
            // display | 'BYCLICK':點選顯示; 'ALWAYS':常顯 |
            callout: {
              padding: 2,
              fontSize: 15,
              bgColor: "#f78063",
              color: '#ffffff',
              borderRadius: 5,
              display: 'BYCLICK',
              content: poisdatas[index].name
            }
          })
        })
        //  將資料儲存
        this.setData({
          markers: markers_new,
          poisdatas: poisdatas
        })
      },
      fail: function(info){
        wx.showModal({title:info.errMsg})
      }
    }) 
  },

呼叫getPoiAround介面返回成功的結果

bindmarkertap 啟用 makertap圖示點選事件，改變map_text裡面內容

<view class="map_container">
  <map class="map" id="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location="true" markers="{{markers}}" bindmarkertap="makertap">
  </map>
  
</view>
<view class="map_text">
  <text class="h1">{{textData.name}}</text>
  <text wx:if="{{textData.distance != null}}">{{textData.distance}}m</text>
  <text>{{textData.desc}}</text>
</view>

makertap 啟用showMarkerInfo展示標記點資訊，changeMarkerColor改變標記點顏色

makertap(e) {
    var id = e.detail.markerId;
    this.showMarkerInfo(id);
    this.changeMarkerColor(id);
},

之前不是說poisdatas存放該點的位置資訊嘛，我們拿到 id 就可以取出來存到textData裡面顯示了

 // 展示標記點資訊
  showMarkerInfo(i) {
    const {poisdatas} = this.data;
    this.setData({
      textData: {
        name: poisdatas[i].name,
        desc: poisdatas[i].address,
        distance: poisdatas[i].distance
      }
    })
  },

如果是點選的那個位置就把iconPath替換成orange.svg，其餘都是blue.svg，並設定被點選的氣泡 display為顯示（'ALWAYS'）,將修改後的資料重新儲存就可以啦

// 改變標記點顏色
  changeMarkerColor(index) {
    let {markers} = this.data;
    for (var i = 0; i < markers.length; i++) {
      if (i == index) {
        markers[i].iconPath = "../../icon/keshan/orange.svg"; 
        markers[i].callout.display = 'ALWAYS'
      } else {
        markers[i].iconPath = "../../icon/keshan/blue.svg"; 
        markers[i].callout.display = 'BYCLICK'
      }
    }
    this.setData({
      markers: markers
    })
  },

更多程式設計相關知識，請存取：！！

以上就是淺析小程式中怎麼引入高德地圖的詳細內容，更多請關注TW511.COM其它相關文章！