Vue-cli 高德地图 H5 应用挖坑（包含IOS/安卓）

1.在页面添加 JS API 的入口脚本标签

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 官方示例

2.地图初始化（展示基础地图） - 第一步完成后本地就可以识别AMap指令了

this.map = new AMap.Map('container', {
   zoom:11,//级别
   center: [116.397428, 39.90923],//中心点坐标
   viewMode:'3D'//使用3D视图
});

官方示例

this.map 我是本地组件使用靠mixins混入，一般var或let就可以单页面应用了

3.开始挖坑（IOS/安卓获取用户位置） - IOS11版本以上需要额外配置（现在基本上都是IOS11了吧~）

new AMap.Geolocation({
     enableHighAccuracy: true, //是否使用高精度定位，默认:true
     timeout: 10000, //超过10秒后停止定位，默认：无穷大
     maximumAge: 0, //定位结果缓存0毫秒，默认：0
     convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
     showButton: true, //显示定位按钮，默认：true
     buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
     buttonOffset: new AMap.Pixel(0, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
     showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
     showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
     panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
     zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
     }).getCurrentPosition((status, result) => {
     // 用户经纬度 userPoint博主为了方便混入使用，可以根据自己需求接收
     if (status == 'complete') this.userPoint = result; 
     if (status == 'error') this.$toast('获取用户经纬度失败')
});

官方示例

看似很美好，然后IOS11以上用户会发现，怎么没有获取到用户信息直接error了？？？（刷新后其实也获取到了，但是用户体验太差了吧） 高德官方有解释但是不明显我给大家搞出来~！（cv就完事了）

首先找到你的index.html页面 和 第一步一样引入

<script type="text/javascript" src="./remogeo.js"></script>

script 里执行一下

if (AMap.UA.ios) {
      var remoGeo = new RemoGeoLocation();
      
      navigator.geolocation.getCurrentPosition = function () {
        return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
      };
      
      navigator.geolocation.watchPosition = function () {
        return remoGeo.watchPosition.apply(remoGeo, arguments);
      };
 }

remogeo.js 推荐放在本地，下他！！下他！！！

4.高德地图的H5跳转APP SCHEME

IOS： iosamap://path?sourceApplication=applicationName&slat=起点纬度&slon=起点经度&sname=起点名称&dlat=终点纬度&dlon=终点经度&dname=终点名称&dev=0&t=2

Android： amapuri://route/plan/?slat=起点纬度&slon=起点经度&sname=起点名称&dlat=终点纬度&dlon=终点经度&dname=终点名称&dev=0&t=2

5.提供一下H5本地未安装APP我的解决方案

监听当前页面是否隐藏，打开了APP自然就隐藏了，取消定时任务

document.addEventListener('visibilitychange', () => {
   clearTimeout(this.time)
})

定时任务：多少时间内没有打开APP默认未安装（弹窗提示安装）

this.time = setTimeout(() => {
    // 弹窗（去下载）
    if(true){
        window.location.href = '当前下载APP地址/需要根据环境判断'
    }
},2000) // 定时时间（我的需求设置了2S）