通过高德地图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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
Javascript 对象的解释
Nov 24 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
vue 实现动态路由的方法
Jul 06 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
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
键盘控制事件应用教程大全
2006/11/24 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python实现彩色图转换成灰度图
2019/01/15 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
利用python 读写csv文件
2020/09/10 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
小学生美德少年事迹
2014/02/02 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
颐和园的导游词
2015/01/30 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
出生证明范本
2015/06/15 职场文书