提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

 

前言

 

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

一、高德地图的准备工作

  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({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: 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 和 citycode
                  city: 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、城市中心点，城市矩形边界等信息。

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区