H5开发：调用高德地图api实现H5定位功能

最新推荐文章于 2024-08-05 20:04:15 发布

Generon

最新推荐文章于 2024-08-05 20:04:15 发布

阅读量2.8w

点赞数 5

分类专栏： H5开发

本文链接：https://blog.csdn.net/Generon/article/details/76068175

版权

本文介绍了如何使用高德JS-API在H5中实现浏览器定位功能，包括IP定位和城市定位，适合支持HTML5的浏览器。通过封装的定位插件和将定位信息存入sessionStorage，提高定位效率。并展示了调用定位和计算两点距离的实例，需要在高德API网站获取key。

摘要由CSDN通过智能技术生成

关于定位，分为GPS定位和网络定位。本文将详细描述的浏览器定位，属于网络定位。这是一种通过使用高德JS-API来实现位置定位、城市定位的方法，包含了IP定位，检索等多种网络定位方式。如果您的手机支持GPS功能，能够自动获取GPS信息，定位将更加准确。

浏览器定位

浏览器定位插件，封装了标准的HTML5定位，并含纠正模块，同时该定位方式仅适用于支持HTML5的浏览器上，如Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera等。代码如下:

    /**
    * Created by ly-wangweiq on 2015/7/29.
    * * support mobile
    */
    //用户位置定位   使用geolocation定位
    var mMap=fu

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Generon

关注关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

高德API在web端的调用（定位方面）

08-20

高德API的调用，实现了模糊查询，地址精确定位，经纬度定位

amap 实现获取定位功能（高德api）

TwoBE9876的博客

07-29

2235

高德地图api获取地址，原生也可用

1 条评论您还未登录，请先登录后发表或查看评论

地址转坐标：利用高德API进行批量地理编码

热门推荐

ooiuy450的专栏

03-27

2万+

AMap.Geolocation：定位插件，整合了浏览器定位、精确IP定位、sdk辅助定位多种手段官方说明：AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果，一种是在getCurrentPosition的时候传入回调函

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

10-17

主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下

高德地图集成:定位功能关键字检索POI 获取附近位置列表

09-20

在移动应用开发中，集成高德地图API是一个常见的需求，特别是在需要实现定位、搜索和导航功能的应用中。本文将详细讲解如何在您的项目中集成高德地图，利用其API实现定位功能、关键字检索POI（Point of Interest）...

在uniapp做高德地图，发布为h5网页

11-14

在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息

vue+高德地图实现地图搜索及点击定位操作

10-14

请确保将`key`替换为你自己申请的高德地图API密钥，这将使你的应用能够调用高德地图的API服务。接下来，我们创建Vue组件的模板。在`<template>`中，我们有输入框用于搜索地址，一个按钮触发搜索，以及一个显示搜索...

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

10-15

在Vue项目中集成高德地图并实现定位及关键字搜索功能是一项常见的需求，下面将详细介绍如何在Vue项目中实现这些功能，以及在实现过程中需要注意的一些关键点。首先，我们需要在项目的`index.html`文件中引入高德...

H5实时上传位置定位 pc生成轨迹；h5保持后台运行

lys20000913的博客

09-01

2397

解决方案 1 /* *若通过用户操作获取定位无需实时上传定位可用一下代码相对定位更加准确 *若需求是生成轨迹如：滴滴打车顺风车运动轨迹以下代码不可行 *在息屏或代码再后台运行时改代码无法获取定位信息 */ navigator.geolocation.getCurrentPosition(onSuccess , onError,{ enableHighAcuracy : true,// 指示浏览器获取高精度的位置，默认为false

【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

weixin_34116110的博客

07-09

401

摘要：关于定位，分为GPS定位和网络定位2种。GPS定位，精度较高，可达到10米，但室内不可用，且超级费电。网络定位，分为wifi定位和基站定位，都是通过获取wifi或者基站信息，然后查询对应的wifi或者基站位置数据库，得到的定位地点。定位数据库可以不断完善不断补充，所以，越定位越准确。本文详细描述了，如果使用高德JS API来实现位置定位、城市定位的方法，包含了IP定位，浏览器定位，检索定位等...

Vue 中使用高德地图API 获取地理位置+逆地理编码+正地理编码附带高德教学

2303_77072102的博客

10-14

5190

在初始化配置的时候我尽量多分步骤详细毕竟配置项有点多容易蒙圈用一个东西我们主要的目的是学习他而不是直接用授人以鱼不如授人以渔(可以跳过文章后面有完整代码)第一步 :引入高德API库：第二步:绘制地图<template>第三步:添加密钥找到index.html页面添加密钥securityJsCode: "", //你项目的密钥</script>第四步:初始化地图配置(下面代码所有都亲测有效直接按照步骤复制阅读就行)步骤一 :在需要的页面进入引入。

高德地图定位

qq_27483091的博客

01-05

1897

//在index.html页面引入 <scriptsrc="http://webapi.amap.com/maps?v=1.3&key=高德地图的key"></script> 配置外置引入，不会被打包进项目包 externals:{ 'AMap':'AMap' }, //在组件页面引入 import AMap from 'AMap' // 开始定位方法 readyPosition(){ let _this = this ...

H5中使用微信小程序位置API

weixin_46201586的博客

10-10

2277

html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

关于高德地图API定位所在城市

TO_Web的博客

10-08

2347

大家好讲个题外话本人也是第一次记录这个关于定位API的文章,如果有不对或不足的地方请各位大神批评和指出, 但各位可以放心的是本文的文章是自己整理的大家可以放心阅读 AMap.Geolocation定位不知道大家之前关于定位是怎样做的,H5中有一个方法可以做到经纬度定位navigator.geolocation.getCurrentPosition( function (position){ …代...

H5+App后台持续定位功能实现

a760352276的博客

10-21

6415

H5+App后台持续定位功能实现1. 项目需求2. 实现过程3.最终实现4. 关于测试用例 1. 项目需求最近有个需求就是需要完成在后台的实时定位，并且要将获取到的定位信息写到Map控件上去。也就是说，即使手机锁屏了或者手机退出到菜单页面也要保证定位能正常运行并且将数据绘制到地图控件中。 2. 实现过程找了网上很多的实现，各种样的都有。这里稍微列举一下，毕竟都是都是方法，也从中找到了一些实现的思路。其实个人认为主要还是为了保活JS，让JS代码生效，即可完成我们的操作。 1.监听后台事件，让其呈现出不退出

html调用高德api定位,高德地图 Javascript API 入门（一）

weixin_33799059的博客

06-04

646

高德地图 Javascript API 入门(一)准备工作首先注册个开发者账号然后创建应用，获取Key新建HTML文件，在body标签中引入如下代码(把你的Key值填入即可)HTML创建设置地图容器HTMLCSS#container {width:300px; height: 180px; }地图初始化创建地图JSvar map = new AMap.Map('container');设置地图参数...