基于Leaflet和高德Web API扩展地理编码服务
需求背景:
需求很简单就是想调用高德地图的地理编码服务,单独扩展一个类出来。
参考地址:
Leaflet类扩展:https://leafletjs.com/examples/extending/extending-1-classes.html?tdsourcetag=s_pcqq_aiomsg
高德Web服务:https://lbs.amap.com/api/webservice/guide/api/georegeo
注意事项:
1.注意申请key;
2.Leaflet默认EPSG 3857坐标系,高德地图坐标系为GCJ-02,这俩其实一样。由于是调用高德的服务,如果地图为非3857坐标系,要注意坐标转换问题。
相关代码:
Geocoder.js:
L.GeoCoder = L.Class.extend({initialize: function () {this._geoUrl = 'https://restapi.amap.com/v3/geocode/geo?';this._regeoUrl = 'https://restapi.amap.com/v3/geocode/regeo?';this._address = " ";this._location = " ";},/*** 正向地理编码: 将地址描述信息转换成地理坐标(经纬度)*/getLocation: function (address,callback) {let me = this;var url = this._buildGeoUrl(address);var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else {request = new ActiveXObject('Microsoft.XMLHTTP');}request.onreadystatechange = function () { // 状态发生变化时,函数被回调if (request.readyState === 4) { // 成功完成// 判断响应结果:if (request.status === 200) {// 成功,通过responseText拿到响应的文本:return me._geoSuccess(request.responseText,callback);} else {// 失败,根据响应码判断失败原因:return me._geoFail(request.status);}} else {// HTTP请求还在继续...}}// 发送请求:request.open('GET', url);request.send();},/*** 逆向地理编码:将地理坐标(经纬度)转换成地址描述信息*/getAddress: function (location,callback) {let me = this;var url = this._buildRegeoUrl(location);var request;if(window.XMLHttpRequest){request = new XMLHttpRequest();} else {request = new ActiveXObject('Microsoft.XMLHTTP');}request.onreadystatechange= function () {if(request.readyState === 4){if(request.status === 200){return me._regeoSuccess(request.responseText,callback);}else {return me._regeoFail(request.status);}}else {//}}request.open('GET',url);request.send();},/*** 构建正向地理编码请求地址* @private*/_buildGeoUrl: function (address) {var url = this._geoUrl + 'address=' + address + '&key=yourkey';return url;},/*** 构建逆地理编码请求地址* lnglat 经纬度坐标 格式:[110.235,38.31]* @private*/_buildRegeoUrl: function (lnglat) {var url = this._regeoUrl + 'location=' + lnglat[0] + ',' + lnglat[1] + '&key=yourkey';return url;},/*** 地理编码服务请求成功,回调方法* @param response* @private*/_geoSuccess: function (response,callback) {return callback(response);},/*** 地理编码服务请求失败* @param response* @private*/_geoFail: function (error) {alert('请求失败'+ error);},/*** 逆地理编码服务请求成功,回调方法* @param response* @private*/_regeoSuccess: function (response,callback) {return callback(response);},_regeoFail: function (error) {alert("请求失败"+ error);}
});L.geoCoder = function(){return new L.GeoCoder();
}
example.html:
<script>//注意坐标问题,该服务基于高德,坐标系为EPSG:3857,如果底图不是3857坐标系注意坐标转换var map = L.map('map');L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{maxZoom: 18,minZoom: 4,subdomains:["1","2","3","4"]}).addTo(map);map.setView(L.latLng(37.550339, 104.114129), 4);document.getElementById("geo").onclick = geoCode;function geoCode(){var address = document.getElementById("address").value;L.geoCoder().getLocation(address,function (res) {console.log(res);var json = JSON.parse(res);var lnglat = json.geocodes[0].location; //格式为:经度,纬度document.getElementById('lnglat').value = lnglat;var temp = lnglat.split(',');L.marker(L.latLng(temp[1],temp[0])).addTo(map);});}
</script>
原文件下载地址:https://download.csdn.net/download/wml00000/10843528
基于Leaflet和高德Web API扩展地理编码服务相关推荐
- Python调用API进行地理编码
原文链接:https://www.lianxh.cn/news/b08df4d49099f.html 平时在做数据调查的时候,我们往往只能拿到地址信息,并不方便直接进行可视化,那么如何将地址信息转化成 ...
- 百度地图Web服务API——正/逆地理编码服务
正/逆地理编码服务(又名Geocoding API)是一类Web API接口服务: 正向地理编码服务提供将结构化地址数据(如:北京市海淀区上地十街十号)转换为对应坐标点(经纬度)功能: 逆向地理编码服 ...
- 谷歌地图JavaScript API第3版 地理编码服务
地理编码服务 概观 地理编码请求 地理编码响应 地理编码结果 地址组件类型 状态代码 反向地理编码 视口偏置 区码偏置 概观 地理编码地址(如"1600剧场百汇,山景,CA")转换 ...
- ios 高德地图加载瓦片地图_IOS 高德地图 API 加载 WMS 服务
IOS 高德地图 API 加载 WMS 服务 本文主要介绍通过自定义高德地图 MATileOverlay 接口,添加 WMS 服务到地图上.废话少说,先贴代码. 代码 自定义类 WMSTileOver ...
- 百度开放平台-地理编码服务
地理编码服务 地理编码服务(又名Geocoder)是一类Web API接口服务: 正地理编码服务提供将结构化地址数据(如:北京市海淀区上地十街十号)转换为对应坐标点(经纬度)功能: 地理编码服务当前 ...
- Arcgis javascript那些事儿(十七)——地理编码服务的发布与使用
一.引言 地理编码是按照主要是地理位置描述与地理坐标的相互转换,主要包括地理编码与反地理编码. 地理编码指的是根据地名获取位置信息: 反地理编码指的是根据位置信息获取地名: 这个的使用我们要根据需求来 ...
- 高德地图api接口文档_在 R 语言里面调用高德地图接口:地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作 注册高德地图,创建应用添加 Key(注意申请 Ke ...
- 基于RESTful标准的Web Api
微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...
- YbSoftwareFactory 代码生成插件【八】:基于JQuery EasyUI、Web Api的 ASP.NET MVC 代码生成插件...
"YbRapidSolution for MVC"是 YbSoftwareFactory 最新的代码生成插件,可一键生成基于ASP.NET MVC的解决方案源代码.其生成的 Dem ...
最新文章
- C语言的HashTable简单实现
- access如何保存小数点后_跟宇哥学习Access数据库是怎样一种体验?(1)
- 【二分法万能模板,告别死循环、越界】Leecode 69. Sqrt(x)——Leecode日常刷题系列
- 使用 Recipe 安装 SAP Commerce Cloud
- pythonhtml生成word_python如何实现word批量转HTML
- go1.14基于信号的抢占式调度实现原理
- 【点阵液晶编程连载三】点阵LCD 的驱动与显控
- 670. Maximum Swap 允许交换一个数 求最大值
- linux下隐藏root进程,宝塔面板隐藏彩蛋 – btkill.py:Linux异常进程专杀
- php cgi fastcgi php-fpm区别
- 因为M.2 SSD,不得不装了WINDOWS10
- 第一章ASP程序设计概述
- kali wifi密码 破解
- 计算机网络工程师中级软考试题及答案,软考中级历年真题+章节题库
- Git版本管理工具的使用方法
- centos7安装英伟达显卡驱动
- 排序公式 与 组合公式
- evernote 有道_如何备份Evernote笔记本(以防万一)
- 微信小程序——校园服务小程序(四)校园论坛加预约理发服务
- 基于PHP+mysql的学生管理系统班级网站同学录