码迷,mamicode.com
首页 > 其他好文 > 详细

vue 定位

时间:2019-08-23 16:14:57      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:坐标   style   新建   RKE   div   定位   one   init   pixel   

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(); // 调用获取地理位置
  }

vue 定位

标签:坐标   style   新建   RKE   div   定位   one   init   pixel   

原文地址:https://www.cnblogs.com/mcll/p/11400615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!