通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法


Posted in Javascript onAugust 24, 2020

产品提出的一个需求是, 通过道路名字, 把道路描绘出来. 这功能在各大地图上都是可以看到的, 所以他们觉得做出来也很简单.

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

但是百度地图本身是没有任何接口可以查询这个信息. 网上能找到的方法, 无非都是通过导航接口, 定义道路的起点和终点进行描绘. 但这种方法只要仔细推敲就有不妥:

  1. 如果道路有分岔怎么办? 每个分岔口都找出来然后不断调用导航接口吗?
  2. 如果道路是弯曲而不是直线怎么办? 导航走的是最近线路, 不一定会完全跟着某条路来走啊.

所以导航的方法并不完美. 我希望制找到的方法是最简单的, 通过路名就要找到整条道路的坐标数据. 但是这谈何容易? 研究过高德地图的都知道, 在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"
...

说到这里, 不得不提 一下地图的道路是怎么画出来的.只要将道路放大, 就会发现各大地图都是用直线一段一段地把整条道路描绘出来, 所以说, 很可能这一段一段的数据就是上面道路信息的数组!

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

接下来就是要验证这个想法, 方法就是把上面得到的数组上的坐标, 放到高德地图拾取器里验证. 经过仔细验证, 果然数组的每组坐标列表, 就是代表一小段道路!

既然这样就直接使用上面那个抓出来的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描绘道路内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
Vue render深入开发讲解
Apr 13 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
Node.js 中判断一个文件是否存在
Aug 24 #Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 #Javascript
在Vue中使用HOC模式的实现
Aug 23 #Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 #Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 #Javascript
vue中watch和computed的区别与使用方法
Aug 23 #Javascript
vue动态设置页面title的方法实例
Aug 23 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
js实现下一页页码效果
2017/03/07 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
vscode调试django项目的方法
2020/08/06 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
人事经理岗位职责
2014/04/28 职场文书
村干部任职承诺书
2015/01/21 职场文书
综合测评个人总结
2015/03/03 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
解除合同协议书范本
2016/03/21 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis