(vue)h5 通过高德地图(原生) 获取当前位置定位
项目需求是:获取到当前城市定位,然后显示该城市的服务项
之前做了一版百度地图,因为商业原因,公司选择了高德地图,所以要对地图进行更换。百度地图原生点这里加粗样式
也不算顺利,之前做的记录都不存在了。
vue-amap是基于高德原生封装好的供vue使用,对图层的操作会更便捷一些。vue-amap点这里
当前的需求,只需拿到当前定位。所以可以使用原生js
1.index.html文件
- 用cdn引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Geolocation"></script>
2.vue.config.js文件
- 将cdn引入vue项目里
externals: {// 'BMap':"BMap",AMap: 'AMap', // 高德地图配置AMapUI: 'AMapUI'}
3.使用的页面设置
- 不用设置 import AMap form’AMap’
踩得最大的坑就是这个,不晓得为什么网上这多人引入
一会‘AMap’ is not defined
一会出现 To install it, you can run: npm install --save AMap
光是为解决出现的引入问题就花了大半时间 - 尤其与之对应的 .getCurrentPosition方法更是花样报错,把所有报错轮了一遍。有博主说是在https环境下才能获取成功
- 所以主要使用获取city城市信息
- getCurrentPosition这里如果能获取准确位置最好,不能就获取城市定位
getAmap(){const that = this;AMap.plugin("AMap.Geolocation", () => {var geolocation = new AMap.Geolocation({// 是否使用高精度定位,默认:trueenableHighAccuracy: true,//是否使用安卓定位sdk用来进行定位,需要安卓端sdk配合useNative: true,// 设置定位超时时间,默认:无穷大timeout: 10000,});geolocation.getCurrentPosition((status, result) => { //获取用户当前的精确位置if (status == "complete") {that.showCode = result.adcode.substring(0, 4)if (that.showCode.length === 4) {this.surePosition(result.position[0],result.position[1])} else {that.showCity = '未获取定位'that.getServiceType(0)}}else {geolocation.getCityInfo((status, result) => { //只能获取当前用户所在城市和城市的经纬度if (status == "complete") {this.surePosition(result.position[0],result.position[1])}else {that.showCity = '未获取定位'that.getServiceType(0)}})}})})},
4.进行api请求
- 获取到了大致经纬度与城市,最好再一次进行逆地址编码请求
- 逆地址编码请求结果更详细更确定城市地址。
- extensions=all可以不设置,但设置了会获得地标信息商圈这种信息
surePosition(re0,re1){const that = this;let key='你的key'axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${re0+','+re1}&extensions=all`).then( (response) => {console.log('response'+response.data)if(response.data.status){} else {that.showCity = '未获取定位'}}})},
(vue)h5 通过高德地图(原生) 获取当前位置定位相关推荐
- (2023进阶版)vue+h5 通过高德地图(原生) 获取当前位置定位
前言:因为也是用的上一个版本的代码,为了描述清楚所以就直接复制文章来更改了,这一版更加完善简洁,高德地图精确度也更高 (2021年写过的一版上线了挺长时间,2023年突然被应用市场下架,说流程走不通, ...
- 关于h5使用高德地图,没有获取经纬度
说明: 这个记录只用于自己记录查看, 但你实在没有方法去解决也可以去尝试一下嘛 正在更新记录中 关于h5使用高德地图,获取不到经纬度 情况一: 可能需要配置https
- java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
- 高德地图API获取当前位置对应的周边信息
一.前言 当前公司开发计划做一个打卡功能,获取用户信息地理信息后,提供列表给客户选择打卡地点(200米范围内).自己今天对三家地图开放者平台文档进行了查看比较(腾讯.百度.高德),目前实现的方法采用的 ...
- Android 高德地图key获取、坐标定位
前期准备 点击进入高德平台获取key **步骤一:**登录注册进入控制台 步骤二: **步骤三:**获取sha1值,以及其包名. **步骤四:**获取sha1值 步骤五:复制获取到key值 到这前期工 ...
- 高德地图自动获取当前位置可搜索可拖拽获得GPS和道路信息
实现思路: 获取当前的ip所在位置设置中心点,根据组件获取当前信息,搜索跳转到搜索的中心点 AMap.Geolocation(获取当前ip定位) misc/PositionPicker(组件 获取当前 ...
- C# 调用高德地图API获取经纬度以及定位,JS获取定位【万字详解附完整代码】
最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了.因为是写的web端,百度地图定位API申请的Appkey需要网址过滤.索性就用高德定位了(有一说 ...
- vue中基于高德地图,获取省级地图(以安徽为例)
效果图展示 <template><div><div id="mapId" class="rescure-map"></ ...
- vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台 登录后到控制台,然后创建应用,选择对应的配置 创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
- 高德地图准确获取当前位置信息
代码示例 JavaScript mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () {geo ...
最新文章
- LeetCode Reverse Linked List II
- DOS批处理高级教程精选(四)
- 用java实现zip压缩
- 【Modelsim零基础入门】verilog仿真程序:1-bit A+B
- 前端学习(582):实现观看和调试dom节点
- 深度学习图像预处理——分类
- 边工作边刷题:70天一遍leetcode: day 26
- 存储过程从入门到熟练(多个存储过程完整实例及调用方法)
- 技术分解:光纤传感在交通监控中的应用
- android 按键流程及映射
- a10 amd 安装黑苹果_分享黑苹果安装经验
- 【力扣】合并两个有序链表
- 美团外卖数据采集接口
- 秃头程序员保姆教程:Spring框架自学之路(一)
- arcgis图层合并裁剪
- 微信小程序授权微信开放平台
- 最好的余生:有家回,有人等,有饭吃
- 六爻金钱卦 手工摇卦方法
- 利用摄像头拍照并保存
- 微软证实10月25日正式发布Windows8系统
热门文章
- 2017 linux wine 迅雷,wine 迅雷下载安装(wine 迅雷极速版)【Linux上用迅雷7】
- IBX 常见问题解答(译)
- 回文数字 观察数字:12321,123321都有一个共同的特征,无论从左到右读还是从右向左读;都是相同的。这样的数字叫做: 回文数字。 本题要求你找到一些5位或6位的十进制数字。满足要求: 该数字
- BUCK电感工作模式
- JSAPI微信支付java
- HHL论文第三弹(参数讨论)
- Linux 基础之基础网络ss命令
- 软件开发常用图标网址大全
- PS修补工具使用方法
- React 引用 ant 组件 使用 react-custom-scrollbars美化(隐藏)滚动条