通过高德地图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 相关文章推荐
js判断60秒以及倒计时示例代码
Jan 24 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php计算税后工资的方法
2015/07/28 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
深入分析PHP设计模式
2020/06/15 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
社区工作感言
2014/02/21 职场文书
霸王洗发水广告词
2014/03/14 职场文书
论文评语大全
2014/04/29 职场文书
关于青春的演讲稿
2014/05/05 职场文书
教师教学评估方案
2014/05/09 职场文书
医学专业大学生求职信
2014/07/12 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
张思德观后感
2015/06/09 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis