通过高德地图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 相关文章推荐
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
javascript封装简单实现方法
Aug 11 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
js实现右键弹出自定义菜单
Sep 08 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安全配置
2006/10/09 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python 处理图片像素点的实例
2019/01/08 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
公司门卫管理制度
2014/02/01 职场文书
校园安全教育广播稿
2014/02/17 职场文书
财务出纳岗位职责
2015/03/31 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技