uni-app 高德地图及H5定位功能实现

在uni-app中实现高德地图及H5定位功能，可以借助高德地图的JavaScript API以及uni-app自带的定位API。以下是一个简要的代码示例，展示了如何在uni-app项目中集成这两种定位功能。

1. 引入高德地图JavaScript API

首先，在H5页面中引入高德地图的JavaScript API。可以在pages/index/index.vue的<template>部分添加一个<div>用于展示地图，同时在<script>部分引入API并初始化地图。

<template>
  <view>
    <div id="map" style="width: 100%; height: 500px;"></div>
  </view>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://webapi.amap.com/maps?v=2.0&key=你的高德地图API密钥';
      script.onload = () => {
        this.loadMap();
      };
      document.head.appendChild(script);
    },
    loadMap() {
      const map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 11,
        center: [116.397428, 39.90923] // 默认中心点
      });

      AMap.plugin('AMap.Geolocation', () => {
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000,           //超过10秒后停止定位，默认：无穷大
          maximumAge: 0,            //定位结果缓存0毫秒，默认：0
          convert: true,            //自动偏移定位结果，默认：true
          showButton: true,         //显示定位按钮，默认：true
          showMarker: true,         //定位成功，显示定位点
          panToLocation: true,      //定位成功、将定位到的位置作为地图中心点
          zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition((status, result) => {
          if (status === 'complete') {
            console.log(result.position); // 定位成功
          } else {
            console.log(result.message);  // 定位失败
          }
        });
      });
    }
  }
};
</script>

2. 使用uni-app定位API

对于非H5平台（如小程序、App等），可以使用uni-app提供的定位API。在pages/index/index.vue中，可以添加一个按钮来触发定位功能。

<template>
  <view>
    <button @click="getLocation">获取定位</button>
  </view>
</template>

<script>
export default {
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02', // 返回可以用于 `uni.openLocation` 的经纬度
        success: (res) => {
          console.log(res.latitude, res.longitude);
        },
        fail: (err) => {
          console.error(err);
        }
      });
    }
  }
};
</script>

通过上述代码，你可以在uni-app项目中实现高德地图在H5页面的定位功能，以及利用uni-app自带的定位API在其他平台获取定位信息。