前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、高德地图的准备工作

1.注册高德地图管理者账号 https://developer.amap.com/ 准备好key

2.在index.html body中引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.13&key=your key"></script>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>高德地图定位</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.13&key=your key"></script></head><body><div id="app" style="width: 100vw; overflow-x: hidden;"></div></body>
</html>

二、创建方法

1.methods

代码如下（示例）：

getlocation(){//获取定位let mapObj = new AMap.Map('iCenter', {resizeEnable: true});//添加AMap.Geolocation插件AMap.plugin('AMap.Geolocation', function () {//使用插件以及插件的配置var  geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,//  定位按钮的排放位置,  RB表示右下buttonPosition: 'RB'});geolocation.getCurrentPosition()AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)function onComplete (data) {// data是具体的定位信息console.log(data)}function onError (data) {// 定位出错console.log(data)getLngLatLocation()}const self = this;function getLngLatLocation() {AMap.plugin("AMap.CitySearch", function() {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function(status, result) {if (status === "complete" && result.info === "OK") {// 查询成功，result即为当前所在城市信息console.log(result);AMap.plugin("AMap.Geocoder", function() {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: result.adcode});var lnglat = result.rectangle.split(";")[0].split(",");geocoder.getAddress(lnglat, function(status, data) {if (status === "complete" && data.info === "OK") {// result为对应的地理位置详细信息console.log(status,result,data);}});});}});});}});}

2.created

代码如下（示例）：

created () {this.getlocation()
},

总结

定位失败的原因

getCurrentPosition返回的message原因解析：

1、Get ipLocation failed：IP精确定位失败，精确IP定位服务目前无法完全覆盖所有用户IP，失败率在5%左右；

2、sdk定位失败：请检查sdk的key是否设置好，以及webview的定位权限及应用和系统的定位权限是否开启。

3、浏览器定位失败，有多种情况：

1）Browser not Support html5 geolocation：浏览器不支持原生定位接口，如IE较低版本的浏览器等；

2）Geolocation permission denied：用户禁用了定位权限，需要用户开启设备和浏览器的定位权限，并在浏览器弹窗中点击“允许使用定位”选项。

3）Geolocation permission denied：浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位。

4）Geolocation permission denied：Access to geolocation was blocked over secure connection with mixed content，也就是在Https的页面中引用的http的资源。

5）Get geolocation time out：浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象，另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。

6）Get geolocation failed：定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。

注释：如果定位到城市即可满足需求，建议大家改用Geolocation.getCityInfo方法，可以根据IP返回用户所在城市的基本信息，包括省、市名称、adcode、citycode、城市中心点，城市矩形边界等信息。

VUE项目使用高德地图进行精准定位高德地图API相关推荐

vue（移动端）使用高德地图实现精准定位
目录效果图前提准备代码展示效果图两个页面页面一(粗略定位) 点击城市进入页面二 (粗略定位),搜索框输入具体位置(以大连理工大学为例) 点击大连理工大学,回到页面一,并展示精准位置再次点 ...
高德地图--SDK集成--定位功能地图定位搜索
最近项目需要到高德定图定位,就此记录下简单集成思路下载文件之只放了libs和主要代码文件 https://download.csdn.net/download/qq_38355313/1035261 ...
腾讯地图实时精准定位
最近写项目的时候遇到一个问题,需要用到实时定位,H5页面怎么实时定位.然后就是各种百度和文档,试用了很多方法,都不太理想,终于找到一个比较中肯的方法. 我用的是腾讯地图,使用的话去腾讯地图注册账号申请 ...
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
前几天vue项目中需要使用百度地图的路数功能制作历史轨迹,为了离线时也可以正常计算路程等,所以这里选择使用原生离线去实现路书这里放出百度的官方示例:地图JS API示例 | 百度地图开放平台我先用 ...
html地图根据坐标定位,百度地图js根据经纬度定位和拖动定位点
&lt我自址哈这工边识框处己按后大都加控不架的;/scrip比抖朋要插支一圈不者地器享说几t> 定位 body, html, #allmap { width: 100%; height: ...
vue 项目打包通过命令修改 vue-router 模式，修改 API 接口前缀
需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上 ...
Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
企业微信小程序_集成腾讯地图实现精准定位考勤打卡
开源项目地址:https://gitee.com/gblfy/tx-position-check-in 关于微信小程序集成腾讯地图详情,可以参考:https://blog.csdn.net/weixi ...
android 高德地图sdk连续定位,高德地图实战：后台持续定位实现
public class LocationService extends Service { private static final String TAG = "LocationServi ...

VUE项目使用高德地图进行精准定位高德地图API

文章目录

前言

一、高德地图的准备工作

二、创建方法

1.methods

2.created

总结

VUE项目使用高德地图进行精准定位高德地图API相关推荐

最新文章

热门文章

VUE项目使用高德地图进行精准定位 高德地图API

文章目录

前言

一、高德地图的准备工作

二、创建方法

1.methods

2.created

总结

VUE项目使用高德地图进行精准定位 高德地图API相关推荐

最新文章

热门文章

VUE项目使用高德地图进行精准定位高德地图API

VUE项目使用高德地图进行精准定位高德地图API相关推荐