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

    高德定位

    https://blog.csdn.net/YY110621/article/details/87921605(copy)

    话不多说,直接写方法步骤,需要的直接拿去放在自己项目中即可使用
    先看下效果图:


    第一步:在项目中创建一个js文件,然后把下面的代码全部拷贝进去

    /**
    * 高德地图定位
    * @type {{}}
    */
    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;
    }
    }
    第二步:在需要用到的页面引入你创建的这个js文件(下面这是我的引入路径可以替换成你的即可)
     

    import { location } from "../../pages/utils/LocationUtil";
    第三步:就是调用方法了。首先在methods方法中声明方法,然后在mounted挂在后调用声明的方法即可
     

    methods: {
    /**获取地图定位*/
    getLocation() {
    let _that = this;
    let geolocation = location.initMap("map-container"); //定位
    AMap.event.addListener(geolocation, "complete", 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(); // 调用获取地理位置
    }

    百度定位

    https://blog.csdn.net/weixin_43837268/article/details/84634291(copy)

  • 相关阅读:
    gitlab安装笔记二_Centos7配置163yum源
    gitlab安装笔记一_虚拟机中安装Centos7
    初篇:我与Linux
    Redis分布式锁正确的实现方法
    MacOS从零开始搭建hexo博客
    docker服务编排--docker-compose
    多线程问题整理
    maven依赖范围
    linux打开文件数 too many open files 解决办法
    【数据结构】队列-数组模拟队列
  • 原文地址:https://www.cnblogs.com/dianzan/p/10678397.html
Copyright © 2011-2022 走看看