H5App Web端定位当前位置，获取GPS和地址信息 (高德API)

仅支持高级浏览器

首先注册高德地图开发者账号，建立应用，获取key
页面中引入：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=您申请的key值"></script>

然后功能实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><title>获取地理位置</title><style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=自己应用的KEY"></script>
</head>
<body><div id="iCenter"></div><script type="text/javascript">var mapObj = new AMap.Map('iCenter');mapObj.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 10000,           // 超过10秒后停止定位，默认：无穷大maximumAge: 0,            // 定位结果缓存0毫秒，默认：0convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,         // 显示定位按钮，默认：truebuttonPosition: 'LB',     // 定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});mapObj.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息});function onComplete(obj){var res = '经纬度：' + obj.position + '\n精度范围：' + obj.accuracy + '米\n定位结果的来源：' + obj.location_type + '\n状态信息：' + obj.info + '\n地址：' + obj.formattedAddress + '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);alert(res);}function onError(obj) {alert(obj.info + '--' + obj.message);console.log(obj);}
</script>
</body>
</html>

H5App Web端定位当前位置，获取GPS和地址信息 (高德API)相关推荐

在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
Android使用Google定位服务定位并将经纬度转换为详细地址信息（国省市县街道）
本文是作者在学习使用Google定位服务定位时的学习笔记,采用的是Kotlin语言编写. 1.位置权限以及定位服务 1.1 位置权限 1.2 动态权限申请 1.3 位置服务 1.4 APP权限与定位服 ...
获取IP地址信息的API合集
今天给大家分享一些获取IP地址信息的API合集一.ip.cn查询网获取当前客户端IP 二.ip查询网获取当前客户端IP 三.百度获取IP地址信息四.本站获取当前客户端IP信息五.其他平台获取IP ...
通过一张照片，获取照片的地址信息
我们如何通过一张日常照片,从中获取关键信息,确实该图片的详细位置. 例:## 通过一张照片,获取照片的地址信息这是一张消费者在一家餐厅的图片. 首先,我们先对照片进行一个整体上的观测,很明显地看出有麦 ...
Python爬取链家网获取二手房数据并调用高德api获得经纬度
链家网获得数据地址,高德api获得经纬度(同理链家网也可以换成其他58同城,赶集网的数据,因为反爬虫比较厉害,没时间整,就用链家网的数据先试试水) 首先爬链家网,Info包含一条信息 import j ...
C#腾讯地图Web端定位地址搜索及手机导航
前段时间项目涉及到腾讯地图的业务,这里马克一下. 一开始做腾讯地图功能完全是懵逼的,一搜网上做百度地图居多,问为什么不用百度地图,原因是后面会衔接微信,百度定图定位会有偏差,网上一搜,果真有不少网友吐 ...
kriging插值在web端的应用含kriging.js下载地址
1.在项目的过程中往往由于用户提供(或自己搜集)的原始数据数据量不够,作出的一些曲线效果或者gis效果达不到效果,此时需要使用插值的方式完善数据,提升效果本文主要讲述web端克里金插值的使用步骤 k ...
如何通过经纬度坐标获取附近的地址信息？
经纬度是确定每个地点位置的精确坐标,使用坐标描述一个位置,非常准确但是并不直观,面向用户表达并不友好.HMS Core定位服务提供了逆地理编码功能,可以通过纬度获取附近地点的详细地址,将坐标转化为地理 ...
JAVA根据IP地址获取省份城市和经纬度(可获取国家名称淘宝高德API如果是国外IP获取到的为空)
所需jar包maven地址: <dependency><groupId>com.maxmind.geoip2</groupI ...

H5App Web端定位当前位置，获取GPS和地址信息 (高德API)

首先注册高德地图开发者账号，建立应用，获取key

页面中引入：

然后功能实现

H5App Web端定位当前位置，获取GPS和地址信息 (高德API)相关推荐

最新文章

热门文章