zoukankan      html  css  js  c++  java
  • vue 定位

    1.vue中index.html:

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"></script>
     
    2.新建一个js(我习惯建在static目录下)
    /**
    * 高德地图定位
    */
    export 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;
      }
    }
     
    3.在指定文件script:
      import { location } from "../../../static/location.js";
      
      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.province = result.addressComponent.province;
            that.city = result.addressComponent.city;
            that.district = result.addressComponent.district;
          });
        }
      },
      mounted() {
        this.getLocation(); // 调用获取地理位置
      }
  • 相关阅读:
    API WAVE 专栏
    PCM数据格式(转)
    Windows 下音频数据采集和播放(转)
    java实现FFT变换(转)
    用74HC165读8个按键状态(转)
    机器人局部避障的动态窗口法(dynamic window approach) (转)
    TLD视觉跟踪算法(转)
    FFT算法在单片机中的使用&&LCD12864驱动
    Oracle442个应用场景-----------Oracle数据库物理结构
    Swift具体解释之三----------函数(你想知道的都在这里)
  • 原文地址:https://www.cnblogs.com/mcll/p/11400615.html
Copyright © 2011-2022 走看看