uniapp使用高德地圖完全指南

一、uniapp使用高德地圖小程序

高德地圖可以很方便地應用到uniapp小程序中。要使用高德地圖小程序，需要先安裝uni-app插件。安裝方式如下：

npm install uni-app

安裝完插件後，在項目中引入地圖組件：

<template>
  <view>
    <map :longitude="longitude" :latitude="latitude" :markers="markers" style="width:100%; height:300px;"/>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: 116.397428,
        latitude: 39.90923,
        markers: [{
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          name: 'T.I.T 創意園'
        }]
      }
    }
  }
</script>

其中，longitude和latitude用於指定地圖顯示的中心點位置，markers用於標記地圖上的點位。

二、uniapp調用高德地圖

在uniapp中調用高德地圖進行定位或者路徑規劃，需要使用高德地圖API。首先，需要在高德地圖開發者中心申請開發者賬號，獲得API key。在應用中使用API時，需要將API key添加到請求參數中。

示例代碼：

<template>
  <view>
    <button type="primary" @click="getLocation">獲取當前位置</button>
  </view>
</template>

<script>
  export default {
    methods: {
      getLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: function(res) {
            const url = 'http://restapi.amap.com/v3/geocode/regeo?key=yourkey&location=' +
              res.longitude + ',' + res.latitude + '&poitype=&radius=1000&extensions=all';
            uni.request({
              url: url,
              success: (res) => {
                console.log(res);
              }
            });
          }
        });
      }
    }
  }
</script>

上面的代碼會在點擊按鈕後，通過uni.getLocation方法獲取當前位置的經緯度，並將API key和經緯度信息添加到請求參數中，向高德地圖API中心發出請求，並列印返回結果。

三、uniapp使用高德地圖搜索位置

高德地圖API提供了位置搜索的介面，可以根據關鍵詞或者類型進行位置搜索，返回搜索結果的經緯度。

示例代碼：

<template>
  <view>
    <input v-model="searchText" type="text" placeholder="輸入搜索關鍵字"/>
    <button type="primary" @click="searchLocation">搜索位置</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchText: '',
        location: ''
      }
    },
    methods: {
      searchLocation() {
        const url = 'https://restapi.amap.com/v3/place/text?key=yourkey&keywords=' +
          encodeURIComponent(this.searchText) + '&city=&output=json&offset=20&page=1&extensions=all';
        uni.request({
          url: url,
          success: (res) => {
            console.log(res);
            if (res.data && res.data.pois && res.data.pois.length > 0) {
              this.location = res.data.pois[0].location;
            }
          }
        });
      }
    }
  }
</script>

上面的代碼中，會在輸入框中輸入搜索關鍵字後，通過調用高德地圖API的位置搜索介面，返回搜索結果並列印到控制台中。

四、uniapp使用高德地圖手動獲取位置

除了使用定位API獲取位置信息外，還可以通過手動選擇地圖上的點位來獲取位置信息。

示例代碼：

<template>
  <view>
    <map :longitude="longitude" :latitude="latitude" :markers="markers" :show-location="true"
      @bindmarkertap="onMarkerTap" style="width:100%; height:300px;"/>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: 116.397428,
        latitude: 39.90923,
        markers: [{
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          name: 'T.I.T 創意園'
        }]
      }
    },
    methods: {
      onMarkerTap(e) {
        console.log('onMarkerTap', e);
        if (e.markerId === 1) {
          this.longitude = 116.424655;
          this.latitude = 39.925519;
        }
      }
    }
  }
</script>

上面的代碼中，通過配置地圖組件的show-location屬性為true，可以在地圖上顯示當前位置的標記。然後通過監聽組件的bindmarkertap事件，獲取用戶點擊的標記信息，修改地圖的中心位置。

五、uniapp使用高德地圖路徑規劃

高德地圖API還提供了路徑規劃的介面，可以根據起點和終點，返回規劃好的路徑方案。可以在地圖上展示規劃好的路徑。

示例代碼：

<template>
  <view>
    <map :longitude="longitude" :latitude="latitude" :polyline="polyline" style="width:100%; height:300px;"/>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: 116.397428,
        latitude: 39.90923,
        polyline: []
      }
    },
    methods: {
      drawRoute() {
        const that = this;
        uni.request({
          url: 'https://restapi.amap.com/v3/direction/driving?key=yourkey&origin=116.481028,39.989643&destination=116.434446,39.90816&extensions=base',
          success: function(res) {
            const steps = res.data.route.paths[0].steps;
            const paths = [];
            for (let i = 0; i < steps.length; i++) {
              const segment = steps[i].polyline.split(';');
              for (let j = 0; j < segment.length; j++) {
                const point = segment[j].split(',');
                paths.push({
                  longitude: point[0],
                  latitude: point[1]
                });
              }
            }
            that.polyline.push({
              points: paths,
              color: "#FF0000DD",
              width: 2,
              dottedLine: false
            });
            console.log(res);
          }
        });
      }
    }
  }
</script>

上面的代碼中，通過調用高德地圖API的路徑規劃介面，獲取起點和終點的路徑，並將路徑展示在地圖上。

六、uniapp地圖接入高德地圖

將高德地圖接入uniapp應用，需要先在高德地圖開發者中心註冊開發者賬號，獲得API key，然後安裝uni-app插件，對應的命令為：

npm install uni-app

然後在項目中安裝高德地圖組件，對應的命令為：

npm i --save uni-amap-map@latest

然後在需要使用地圖的頁面中，引入地圖組件：

<template>
  <view>
    <u-amap
      :scrollZoom="true"
      :scaleControl="true"
      :zoom="16"
      :center="{longitude: longitude, latitude: latitude}"
      :markers="markers"
      style="width: 100%;height: 100%;position: absolute;top: 0;"
    />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        longitude: 116.397428,
        latitude: 39.90923,
        markers: [{
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428
        }]
      }
    }
  }
</script>

上面的代碼中，引入了高德地圖組件，並配置組件的一些屬性，如地圖縮放、中心點、標記等。

七、uniapp高德地圖API使用教程

高德地圖API提供較為豐富的介面供開發者使用，包括但不限於定位、搜索、路徑規劃等。下面是一些高德地圖API使用示例：

//獲取當前位置
uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log(res);
  },
  fail: function () {
    console.log('獲取位置失敗');
  }
});

//搜索位置
uni.request({
  url: "https://restapi.amap.com/v3/place/text?key=yourkey&keywords=" + encodeURIComponent('北京大學') + "&city=&output=json&offset=1&page=1&extensions=all",
  success: (res) => {
    console.log(res.data);
  }
});

//路徑規劃
uni.request({
  url: "https://restapi.amap.com/v3/direction/driving?key=yourkey&origin=116.481028,39.989643&destination=116.434446,39.90816&extensions=base",
  success: (res) => {
    console.log(res.data);
  }
});

可根據實際需要，在應用中根據文檔提供的介面，進行開發相關功能。