Vue 使用高德地图获取当前位置原创
金蝶云社区-honey缘木鱼
honey缘木鱼
3人赞赏了该文章 1.2万次浏览 未经作者许可,禁止转载编辑于2019年06月25日 21:06:58
summary-icon摘要由AI智能服务提供

文本介绍了在公众号项目中获取用户位置并传递给服务端以获取附近门店距离的两种实现方法。方法一直接使用高德地图的原生SDK,包括注册高德地图、获取key、在项目中引入高德地图脚本、创建js文件编写定位代码、在需要定位的页面引入并调用这些定位代码。方法二使用vue-amap组件,通过npm安装、配置babel、在main.js中引入并初始化vue-amap,然后在页面中调用定位方法。同时,文中还提到了使用vue-amap时可能遇到的问题及解决方案,如npm安装警告、iOS 10中的定位权限修改、避免命名冲突、处理eslint报错等,并解释了定位超时和获取IP位置失败的可能原因。

    公众号项目有一个需求,获取当前用户的位置,传给服务端,服务端返回具体各门店的距离。因为移动端都是用高德地图API地位,为了减少相对应的误差,公众号也选用高德地图。


方法一. 直接调用高德原生 SDK

      1.注册高德地图和获取高德地图的key


       

029B7E75-B009-49FB-97AD-47C643BA0E05.png

     2.项目中index.html文件中引入高德地图 (key代表上面获得的)

<!--高德key-->
<script src="//webapi.amap.com/maps?v=1.3&key=03f14607c0f3122faa4*****930e27"></script>

     3.在项目里创建一个js文件,文件目录如下:

    

屏幕快照 2019-06-25 下午12.42.10.png

     js文件里定位代码为:

 

/**
 * 高德地图定位
 * @type {{}}
 */
 const location =  {
  initMap(id){
    let mapObj = new AMap.Map(id, {})
    let geolocation;
    mapObj.plugin(['AMap.Geolocation'], function () {
      geolocation = 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(10, 20), //  定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
        showMarker: true, //  定位成功后在定位到的位置显示点标记,默认:true
        showCircle: true, //  定位成功后用圆圈表示定位精度范围,默认:true
        panToLocation: true,  //  定位成功后将定位到的位置作为地图中心点,默认:true
        zoomToAccuracy: true  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
      })
      mapObj.addControl(geolocation)
      geolocation.getCurrentPosition()
    })
    return geolocation;
  }
}
export default location

   4.在需要调用定位的页面引入positionLocation.js文件

   

import location from '../utils/positionLocation'

   5. 调用js中的方法,获取当前地理位置

    

<script>
import location from '../utils/positionLocation'
export default {
  name: 'home',
  data () {
    return {
      location: '',
      lat:0,
      lng:0
    }
  },
  methods: {
    /** 获取高德地图定位 */
    getLocation () {
      let _that = this
      let geolocation = location.initMap('map-container') // 定位
      AMap.event.addListener(geolocation, 'complete', result => {

        console.log(result)
        _that.lat = result.position.lat
        _that.lng = result.position.lng
        _that.location = result.formattedAddress
      })
    }
  },

  mounted() {
    this.getLocation(); // 调用获取地理位置
  }
}

打印结果为:

屏幕快照 2019-06-25 下午12.52.38.png

方法二.使用vue-amap

   vue-amap是基于Vue2.x与高德的地图组件,数据状态与地图状态单向绑定,开发者无需关心地图的具体操作。

   1.npm安装vue-amap

npm install vue-amap --save

   2.在.babelrc文件中配置


{ 
 "presets": [   
   ["es2015", {"modules": false}]  
 ] 
}

  3. 在main.js中引入vue-amap


 import VueAMap from 'vue-amap'; 
  Vue.use(VueAMap);
 
  // 初始化vue-amap
  AMap.initAMapApiLoader({  
  // 高德key  key: '03f14607c0f3122faa4*****930e27',  
  // 插件集合 (插件按需引入) 
   plugin: ['AMap.Geolocation']
   });

 4. 页面调用方法 

<template>
  <div class="amap-page-container">
    <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap>
    <div class="toolbar">
        <span v-if="loaded">
          当前位置为:{{adress}}
        </span>
      <span v-else>正在定位</span>
    </div>
  </div>
</template>

<style>
  .amap-demo {
    height: 300px;
  }
</style>

<script>
  module.exports = {
    data() {
      let that = this;
      return {
        center: [121.59996, 31.197646],
        adress:'',
        loaded: false,
        plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 如果key是企业的,还可以直接result.addressComponent获取省市,周边等信息

                  console.log(result);
                  that.adress = result.formattedAddress;
                  self.center = [result.position.lng, result.position.lat];
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            }
          }
        }]
      };
    }
  };
</script>

调用结果:

屏幕快照 2019-06-25 下午8.41.58.png



总结问题:

1.npm install vue-amap --save 报如下警告

屏幕快照 2019-06-25 下午8.22.48.png

解决办法:

npm install -g npm

 npm install stylus


2.定位时警告

屏幕快照 2019-06-25 下午8.38.47.png

原因 为: 在 IOS 10 中,苹果对 webkit 定位权限进行了修改,所有定位请求的页面必须是 https 协议的。如果是非 https 网页,在 http 协议下通过 html5 原生定位接口会返回错误,也就是无法正常定位到用户的位置,而已经支持 https 的网站则不会受影响。


3.注意vue-amap 的导入名不是 AMap, 避免和高德全局的 AMap 冲突。

4.若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。

屏幕快照 2019-06-25 下午9.01.30.png

解决办法:

在.eslintrc.js 中引入 globals

globals: {   
     'AMap': false,   
  },


5.提示 get geolocation timeout.get iplocation failed.

  官方给出原因:


屏幕快照 2019-06-25 下午8.57.50.png



本篇独发金蝶云社区

图标赞 3
3人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!

您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!

请选择打赏金币数 *

10金币20金币30金币40金币50金币60金币
可用金币: 0