说两句：

  • 以下内容除了我自己写的部分，其他部分在高德开放平台都有（可点击外链访问）。
  • 我所整理的内容以实际项目为基础希望更有针对性的，更精简。
  • 点击直奔主题。

准备工作：

  • 首先，注册开发者账号，成为高德开放平台开发者
  • 登陆之后，在进入「应用管理」 页面「创建新应用」
  • 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>

<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>

<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

显示基础地图所用到的HTML和JS

<body>

<div id="container"></div>

</body>
<script type="text/javascript">

    var map = new AMap.Map('container', {

        resizeEnable: true,

        zoom:11,

        center: [116.397428, 39.90923]//默认的地图中心经纬度

    });

</script>

引入高德地图工具包js文件

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

浏览器定位所用到的JS

/**

 * Created by Mark on 2018/5/3.

 */

//定位

map.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

    });

    map.addControl(geolocation);

    geolocation.getCurrentPosition();

    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息

    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息

});

//解析定位结果

function onComplete(data) {

    if(data.status == 1){

        console.log("定位成功");

        $("#addressInput").val(data.formattedAddress);

        sessionStorage.setItem("dingWei-lng",data.position.getLng());

        sessionStorage.setItem("dingWei-lat",data.position.getLat());

    }

    var str = [];

    str.push('经度：' + data.position.getLng());

    str.push('纬度：' + data.position.getLat());

    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

    console.log(str.join('<br>'));

}

function onError() {

    var str = [];

    str.push('定位失败');

    console.log(str.join('<br>'));

}
到这里为止，使用高德地图实现浏览器定位已经完成了。
但是...^_^
/***************************************

由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。

***************************************/

web开发如何使用高德地图API（一）浏览器定位的更多相关文章

  1. web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  2. web开发如何使用高德地图API（三）点击热点打开信息窗体

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  3. web开发如何使用高德地图API（二）结合输入提示和POI搜索插件

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  4. 高德地图api之location定位

    关于定位,分为GPS定位和网络定位.本文将详细描述的浏览器定位,属于网络定位.这是一种通过使用高德JS-API来实现位置定位.城市定位的方法,包含了IP定位,检索等多种网络定位方式.如果您的手机支持G ...

  5. web开发如何使用百度地图API（一）判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  6. [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  7. 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享

    原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...

  8. 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  9. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

随机推荐

  1. Android动态逆向分析工具ZjDroid--脱壳神器

    项目地址:https://github.com/BaiduSecurityLabs/ZjDroid 前提条件: 1.Root手机一部 2.须要通过Xposed installer( http://dl ...

  2. Too-Java：Intellij Idea

    ylbtech-Too-Java:Intellij Idea IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤 ...

  3. Truck History(prim)

    http://poj.org/problem?id=1789 读不懂题再简单也不会做,英语是硬伤到哪都是真理,sad++. 此题就是一个最小生成树,两点之间的权值是毎两串之间的不同字母数. #incl ...

  4. 2019手机号码JS正则表达式

    前端的正则表达式验证往往是最繁多最复杂的,所以整理了一些最近自己常用的正则表达式,希望能对大家有所帮助! /* 合法uri */ export function validateURL(textval ...

  5. poj1958-汉诺四塔问题（三种方法）

    链接:http://poj.org/problem?id=1958 大意:汉诺塔升级版,四根柱子,n个盘子,求最少移动次数: 两种方法 递推or递归(当然还有思路3--打表) 思路1:递推(或者DP? ...

  6. Google的网站性能优化最佳实践

    网站性能最佳实践   当描述一个web页面的页面速度,评价的一致性遵循许多不同的规则.这些规则是任何阶段的web开发可以应用的前端最佳实践.这个文档的每个规则都陈述于此,无论你是否运行页面测速工具-- ...

  7. Android Studio连接夜神模拟器

    运行-cmd,进入夜神模拟器安装目录,进入目录下的bin 执行Nox_adb.exe connect 127.0.0.1:62001命令,connect左右都有空格. 执行命令后就可以连接到夜神模拟器 ...

  8. oracle-3种工具使用

    1:原命令行,dos 2:sqlplus,图形界面 3:isqlplus,网页版的.(假如自己机器无法安装oracle,可通过别人ip地址去使用oracle,http://ip:5560/isqlpl ...

  9. opengl使用FreeType绘制字体

    原文地址:http://www.cnblogs.com/zhanglitong/p/3206497.html

  10. SLAM: Orb_SLAM中的ORB特征

    原文链接:什么是ORB 关于Orb特征的获取:参考 最新版的OpenCV中新增加的ORB特征的使用 ORB是是ORiented Brief 的简称,对Brief的特定性质进行了改进. ORB的描述在下 ...