高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...

最新推荐文章于 2021-12-16 17:22:58 发布

weixin_39806948

最新推荐文章于 2021-12-16 17:22:58 发布

阅读量718

点赞数

文章标签：高德h5地图api接口

本文链接：https://blog.csdn.net/weixin_39806948/article/details/111783153

版权

本文介绍了如何利用HTML5的Geolocation获取GPS坐标，并通过腾讯地图、高德地图、百度地图的API接口获取坐标对应的周边信息。通过创建AppKey、获取用户地理位置、发送HTTP请求和解析返回数据四个步骤实现。

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

在通过 geolocation 获取到当前的 GPS 坐标后，需要通过“逆地理位置解析”才能得到街道对应的街道、建筑物、周边等相关信息。

下面我使用国内的三家主要的地图厂商(腾讯地图、高德地图、百度地图)来获取我所在的地理位置相关信息。

操作方式同样非常简单，都需要至少以下几个步骤：创建 AppKey 应用密钥；

获取用户地理位置坐标；

发 HTTP 请求获取特定信息；

解析并使用请求返回的数据；

创建 AppKey 应用密钥

登录各自地图官方网站注册并成为开发者并申请就好了，步骤非常简单，不会超过 5 分钟时间。创建好后，会拿到一串字符串密钥，用于验证开发者。

获取用户地理位置坐标

这个在前面的文章中已经讲过了，直接调用 navigator.geolocation.getCurrentPosition() 就好了，不再多说。

发 HTTP 请求获取特定信息

三家厂商的获取接口几乎无异，参数也都差不多。

请求地址// 腾讯地图

https://apis.map.qq.com/ws/geocoder/v1/

// 高德地图

https://api.map.baidu.com/geocoder/v2/

// 百度地图

https://restapi.amap.com/v3/geocode/regeo

注：三家厂商都支持 HTTP/HTTPS 版本，请自行选择，或直接写 “//”。

注：请求的资源是带版本号的，所以，我文章中使用的可能不是最新版本。

请求参数

基本的参数有：密钥、经纬度、源坐标类型、输出类型、回调函数、是否获取周边等。

参数的名字有些不同，但意义相似，另外一些值得注意的地方，直接见我后面的例子就好了。

解析并使用请求返回的数据

大多数都支持几种格式：XML、JSON、JSONP，按需选择。

返回值意义及各字段的含义见各自的开发文档。

举个例子

例子我直接使用 JavaScript 来实现了。// 解析百度地图返回的数据function update_address_baidu(data) {

update_address(data, $('#bd'));}// 解析腾讯地图返回的数据function update_address_tencent(data) {

update_address(data, $('#tx'));}// 解析高德地图返回的数据function update_address_gaode(data) {

update_address(data, $('#gd'));}// 因为数据格式差不多，所以这里一并处理了function update_address(data, ul) {

ul.empty();

if(data.status === 0 || data.status === '1') {

var r = data.result || data.regeocode;

// POI 是周边信息

(r.pois || []).forEach(function(poi) {

var all = (poi.name || poi.title) + '(' + (poi.addr || poi.address) + ')';

var li = $('

');

li.text(all);

ul.append(li);

});

}}// 高德有个坑，不支持设定源坐标的类型// 所以还得单独转换一下坐标function update_address_gaode_coord(data) {

if(data.status === '1') {

var s = data.locations;

var g = document.createElement('script');

g.src = '//restapi.amap.com/v3/geocode/regeo?key=93ebbbb772a24c6625def52e779dc38b&location='+s+'&extensions=all&callback=update_address_gaode'

$('#results').append(g);

}}// 获取详细/特定信息，在获取到坐标后执行function get_detail_location(lat,lng) {

var results = $('#results');

var bd = document.createElement('script');

bd.src = '//api.map.baidu.com/geocoder/v2/?ak=uVQwCq4gtGAyQWmpDwLD7g9bGXRa6UFm&output=json&location='+lat+','+lng+'&coordtype=wgs84ll&pois=1&callback=update_address_baidu';

results.append(bd);

var tx = document.createElement('script');

tx.src = '//apis.map.qq.com/ws/geocoder/v1/?key=3V3BZ-J3KRD-XLI4M-P4VGS-KITNH-7IBO2&location='+lat+','+lng+'&coord_type=1&get_poi=1&output=jsonp&callback=update_address_tencent';

results.append(tx);

// 注意高德的经纬度参数与上面两个是相反的

var gd = document.createElement('script');

gd.src = '//restapi.amap.com/v3/assistant/coordinate/convert?key=93ebbbb772a24c6625def52e779dc38b&locations='+lng+','+lat+'&coordsys=gps&output=json&callback=update_address_gaode_coord'

results.append(gd);}function get_my_addr() {

if('geolocation' in navigator) {

navigator.geolocation.getCurrentPosition(

// 若获取成功

function(position) {

var lat = position.coords.latitude; // 纬度

var lng = position.coords.longitude; // 经度

get_detail_location(lat, lng);

// 若获取失败

function(err) {

alert('获取地理位置时遇到错误。');

// 更多参数