高德定位

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)

vue的定位的更多相关文章

  1. Vue基础理论

    一 vue的定位 (1)Vue.js是一个构建数据驱动的 web 界面的库. (2)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. (3)Vue.js 自身不是一 ...

  2. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  3. Vue作者尤雨溪:以匠人的态度不断打磨完善Vue (图灵访谈)

    访谈对象: 尤雨溪,Vue.js 创作者,Vue Technology创始人,致力于Vue的研究开发. 访谈内容: 你为何选择从事前端方面的工作? 其实,我本科读的是艺术史,研究生阶段学习Design ...

  4. vue学习中遇到的问题

    1.axios使用post传值时无法使用键值对传值的问题 问题的原因:主要是HTTP请求中的get请求和post请求参数的存放位置是不一样的,get请求的参数以键值对的方式跟在url后面的,而post ...

  5. [转]Vue 2.0——渐进式前端解决方案

    前言:框架是什么?为什么要有框架?在众多的框架之中,Vue 独具魅力之处在哪里呢?其背后的核心思想是什么?Vue 究竟火到什么程度?最近发布的 Vue2.0 又做了哪些改进呢?Vue 和 Weex 又 ...

  6. Vue【你知道吗?】

    前言 Vue的由来 Vue最早发布于2014年左右,作者是美中国学生尤雨溪.Vue 的定位就是为前端开发提供一个低门槛,高效率,但同时又能够伴随用户成长的框架 尤雨溪谈Vue.js :缔造自由与真我 ...

  7. vue与react对比总结(一)

    一.react和vue设计上的共同理念 1.使用 Virtual DOM 2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 3.将注意力集中保持在核心库,而将其 ...

  8. vue-cli@2的原理解析

    作为一个菜鸟,我有一颗好奇的心,每当vue init 的时候,看到那流畅的进度和神奇的结果,心里都充满一窥其本质的期望…… 以下就是我不断的console,大致理出来的一个流程心得,纪录在此,以作备忘 ...

  9. vue_day02

    vue_day02 1.绑定事件指令 v-on <body> <div id="app"> <button v-on:click="num+ ...

随机推荐

  1. Codeforces Round #542 C. Connect 搜索

    C. Connect time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  2. MySQL高级知识(九)——慢查询日志

    前言:慢查询日志是MySQL提供的一种日志记录,它记录MySQL中响应时间超过阈值的语句,具体指运行时间超过long_query_time值的sql语句,该sql语句会被记录到慢查询日志中.慢查询日志 ...

  3. Loj 6068. 「2017 山东一轮集训 Day4」棋盘

    Loj 6068. 「2017 山东一轮集训 Day4」棋盘 题目描述 给定一个 $ n \times n $ 的棋盘,棋盘上每个位置要么为空要么为障碍.定义棋盘上两个位置 $ (x, y),(u, ...

  4. jsonp形式的ajax请求:

    sonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求 <!DOCTYPE html> <html> <hea ...

  5. Flask中无法在其他函数中查询Sqlachemy的解决办法

    报错信息部分截取: File "D:\python 3.5\lib\site-packages\flask_sqlalchemy\__init__.py", line 912, i ...

  6. pip 提速方法

    Python 包管理软件 pip 在默认情况下,下载安装 Python 包太慢,容易失败.以下给出解决方案. pip install 的选项说明如下: Package Index Options: - ...

  7. windows解决访问github慢问题

    ·1.更改host文件 文件地址: C:\Windows\System32\Drivers\etc ​ 如果不能直接修改,可拷贝到桌面修改后再复制回去 2.在host文件追加 ​ #github 19 ...

  8. Flask框架简介,常用扩展包及两大核心

    Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...

  9. P1171 售货员的难题--搜索(剪枝)

    题目背景 数据有更改 题目描述 某乡有nn个村庄(1<n \le 201<n≤20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)s(0<s ...

  10. Jmeter(三十六)_运行过程中改变负载

    顾名思义,jmeter在做性能测试时,可以在不停止脚本的情况下修改负载压力,达到期望的测试效果.我们将通过Constant Throughput Timer(吞吐量计时器)和Beanshell服务器来 ...