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);
  }
});

可根据实际需要，在应用中根据文档提供的接口，进行开发相关功能。