通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
产品提出的一个需求是, 通过道路名字, 把道路描绘出来. 这功能在各大地图上都是可以看到的, 所以他们觉得做出来也很简单.
但是百度地图本身是没有任何接口可以查询这个信息. 网上能找到的方法, 无非都是通过导航接口, 定义道路的起点和终点进行描绘. 但这种方法只要仔细推敲就有不妥:
- 如果道路有分岔怎么办? 每个分岔口都找出来然后不断调用导航接口吗?
- 如果道路是弯曲而不是直线怎么办? 导航走的是最近线路, 不一定会完全跟着某条路来走啊.
所以导航的方法并不完美. 我希望制找到的方法是最简单的, 通过路名就要找到整条道路的坐标数据. 但是这谈何容易? 研究过高德地图的都知道, 在javascript api里有虽然有Amap.RoadInfoSearch这个方法
但在web api里就只有搜索API, 搜索出来的对象是place对象, 里面的数据并不足以描绘道路.
那能不能调用javascript api的方法, 通过抓包看看他是怎样调用web api的呢? 测试代码html如下.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>关键字查询-使用默认皮肤</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" rel="external nofollow" />
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<style type="text/css">
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel">
</div>
<script type="text/javascript">
var map = new AMap.Map("mapContainer", {
resizeEnable: true
});
AMap.service(["AMap.RoadInfoSearch"], function() {
var roadSearch = new AMap.RoadInfoSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "020"
});
//关键字查询
roadSearch.roadInfoSearchByRoadName('元岗路', function(status, result) {
alert(result.roadInfo[0].path[0]);
});
});
</script>
抓包后获取到一条非常有用的信息, 有这么一条调用
http://restapi.amap.com/v3/road/roadname?pageIndex=1&city=020&offset=5&key=608d75903d29ad471362f8c58c550daf&s=rsv3&output=json&keywords=%E5%85%83%E5%B2%97%E8%B7%AF&callback=jsonp_749020_&platform=JS&logversion=2.0&sdkversion=1.3&appname=http%3A%2F%2Flbs.amap.com%2Fapi%2Fjavascript-api%2Fexample%2Fpoi-search%2Finput-prompt%2F&csid=C23EE7C1-3ADE-4366-AEF3-D45E622F8568
返回的信息里有一段非常有用的结果, 就是roads数组,
roads:[{id: "020F49F01004315432", name: "元岗路", citycode: "020", width: "12", type: "次要道路（城市次干道）",…},…]
0:{id: "020F49F01004315432", name: "元岗路", citycode: "020", width: "12", type: "次要道路（城市次干道）",…}
进一步分析这个数组的第一个结果, 应该就是roadInfo对象,里面又存在一个polylines数组, 看起来非常像是一段段路的坐标列表.
polylines:
0:"113.3395181,23.16999083;113.3395219,23.17012167;113.3395264,23.17016972;113.3395328,23.17021472;113.3395481,23.17026139;113.3395786,23.17032556;113.3396211,23.17040139;113.3398214,23.17073139;113.339885,23.17084444"
1:"113.3367803,23.1771625;113.3364894,23.17720583;113.3362911,23.17723556;113.3362022,23.17724806;113.3361247,23.17725278;113.3360547,23.17724611;113.3359106,23.17722222;113.3358153,23.17720611;113.3357439,23.17719806;113.3356853,23.17719639;113.3356281,23.17720111;113.3355678,23.17721056;113.3355075,23.17722611;113.3354678,23.17724111;113.3354061,23.17726389;113.335265,23.17732556;113.3348517,23.17749778;113.3347969,23.17751472;113.3347408,23.177525;113.3346953,23.17753139;113.334695,23.17753139"
2:"113.3416042,23.17464861;113.3416194,23.1746825;113.3419189,23.17532083;113.3421011,23.17574861;113.3422519,23.17612111;113.3422869,23.17621917;113.3423011,23.17629222;113.3423103,23.17636083"
...
说到这里, 不得不提 一下地图的道路是怎么画出来的.只要将道路放大, 就会发现各大地图都是用直线一段一段地把整条道路描绘出来, 所以说, 很可能这一段一段的数据就是上面道路信息的数组!
接下来就是要验证这个想法, 方法就是把上面得到的数组上的坐标, 放到高德地图拾取器里验证. 经过仔细验证, 果然数组的每组坐标列表, 就是代表一小段道路!
既然这样就直接使用上面那个抓出来的restapi来用吧, 谁知道一把那个url放浏览器就傻眼了, 返回了以下东西.
jsonp_749020_({"status":"0","info":"INVALID_USER_DOMAIN","infocode":"10006"})
看来这接口不能这么照搬地调用啊, 必须找出高德web api的套路. 于是又参考了一下他的搜索API 是怎么使用的, 文档给出的例子是这样的:
http://restapi.amap.com/v3/place/text?&keywords=北京大学&city=beijing&output=xml&offset=100&page=1&key=<用户的key>&extensions=all
既然这个rest api, 那我把place换成road就应该是查需road的信息, 而截取出来的URL的确有这么一段http://restapi.amap.com/v3/road/roadname , 那就把road替换了他的place, roadname替换他的text, keywords换成路名. 果然得到一条有正确返回的接口了! 虽然这接口他文档没写出来, 但还是被我揪出来了.
http://restapi.amap.com/v3/road/roadname?city=020&key=<用户的key>&keywords=元岗路
到此这篇关于通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法的文章就介绍到这了,更多相关高德地图API描绘道路内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue使用高德地图根据坐标定位点的实现代码
前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma
-
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog
-
利用java、js或mysql计算高德地图中两坐标之间的距离
前言 因为工作的原因,最近在做与地图相关的应用,使用了高德地图,研究了下高德地图计算两坐标距离的方法,官网上提供的开发包中有相关的方法,但是我的产品中比较特殊,无法直接使用提供的方法,所以就自己封装了相关计算方法,供大家参考,下面话不多说了,来一起看看详细的介绍吧. Java实现 首先定义一个用于存储经纬度的类,这里起个名字叫:LngLat package amap; import java.text.DecimalFormat; import java.text.DecimalFormatSy
-
Android中GPS坐标转换为高德地图坐标详解
一.坐标分类 地图坐标大致分为几种: 1.GPS.WGS84,也就是原始坐标体系,这是国际公认的世界标准坐标体系: 2.GCJ-02,又称为"火星坐标",国家测绘局在02年发布的坐标体系,在国内,至少得使用此坐标体系,比如:google.高德.腾讯地图等: 3.其他特殊坐标体系,一般都是由火星坐标通过偏移算法计算得出的,比如百度使用的是BD-09坐标,搜狗使用的是自己的搜狗坐标. 二.坐标转换 1.使用高德地图sdk转换 public AMapLocation fromGpsToAma
-
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
产品提出的一个需求是, 通过道路名字, 把道路描绘出来. 这功能在各大地图上都是可以看到的, 所以他们觉得做出来也很简单. 但是百度地图本身是没有任何接口可以查询这个信息. 网上能找到的方法, 无非都是通过导航接口, 定义道路的起点和终点进行描绘. 但这种方法只要仔细推敲就有不妥: 如果道路有分岔怎么办? 每个分岔口都找出来然后不断调用导航接口吗? 如果道路是弯曲而不是直线怎么办? 导航走的是最近线路, 不一定会完全跟着某条路来走啊. 所以导航的方法并不完美. 我希望制找到的方法是最简单的, 通
-
Python 利用高德地图api实现经纬度与地址的批量转换
我们都知道,可以使用高德地图api实现经纬度与地址的转换.那么,当我们有很多个地址与经纬度,需要批量转换的时候,应该怎么办呢? 在这里,选用高德Web服务的API,其中的地址/逆地址编码,可以实现经纬度与地址的转换. 高德API地址: 地理/逆地理编码:http://lbs.amap.com/api/webservice/guide/api/georegeo 坐标转换:http://lbs.amap.com/api/webservice/guide/api/convert 1.申请key 2.坐
-
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能.分享给大家供大家参考,具体如下: 声明 bug: 页面搜索返回的列表在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 通过高德地图的微信小程序开发API(getInputtips),实现关
-
微信小程序基于高德地图API实现天气组件(动态效果)
在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主
-
Java环境下高德地图Api的使用方式
Java高德地图Api的使用 使用高德经纬度获取地址信息 一些准备用到的常量 /** * 高德地图请求秘钥 */ private static final String KEY = "密钥,可以去高德地图免费申请"; /** * 返回值类型 */ private static final String OUTPUT = "JSON"; /** * 根据地名获取高德经纬度Api */ private static final String GET_LNG_LAT_UR
-
使用百度地图api通过redis实现地标存储及范围坐标点查询功能
1.首先拿到百度地图开发密钥,进入百度地图开放平台:百度地图开放平台 (1)选择开发文档>>web开发>>JavaScript API (2)需要申请密钥才可使用,点击申请密钥(申请密钥的IP白名单可以用' * '代替,所有网站都可用,但安全性很差,所有人都可以抓到这个ak来使用,也可以根据自己的应用场景来设置) 2,Controller代码 public class MapController : Controller { //map视图 public ActionResult
-
vue-cli中使用高德地图的方法示例
第一步 去高德地图开放平台申请密钥 高德地图开放平台 第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的 主要是导出密钥 // 高德地图 key export const MapKey = '你的密钥key' // 地图限定城市 export const MapCityName = '武汉' utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址() expo
-
Vue接入高德地图的完整实例
目录 前言 参考资料 Vue接入高德地图 引用 使用 实现点击按钮缩放功能 地图放大 地图缩小 测量距离 测量面积 行政区划查询渲染 关键字搜索 鼠标绘制区域 总结 前言 Vue 使用高德地图,实现缩放,鼠标绘制,测距.测面积.行政区域范围绘制.关键词查询等操作. 参考资料 高德地图API官网:https://lbs.amap.com/ 高德地图2.0参考手册:https://lbs.amap.com/api/jsapi-v2/documentation#pixel 高德地图2.0示例代码:ht
-
Android开发之高德地图实现定位
在应用开发中,地图开发是经常需要使用的"组件",Google Map虽然有官方教程,无奈用不起来,原因你懂的~~那么国内比较出名的是就是百度地图和高德地图,由于个人喜好,所以选择了高德地图LBS,废话不说,上干货. 1.注册开发者,创建应用 这个几乎是所有开放平台都通用的做法,无外乎注册帐号,成为开发者,然后创建一个Android应用,会为你分配一个key绑定你的服务. 注册key.PNG 2.下载SDK,导入jar包,add to library jar包.PNG 第一个是2D地图的
-
微信小程序 高德地图SDK详解及简单实例（源码下载）
微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南 最后更新时间: 2017年1月9日 本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具 按照微信小程序开发文档下载并安装微信小