通过高德地图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实现的检测浏览器和系统的函数
Apr 09 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
vue实现多级菜单效果
Oct 19 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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模板引擎smarty详细介绍
2015/05/26 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue生成token并保存到本地存储中
2018/07/17 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python函数的周期性执行实现方法
2016/08/13 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python3 logging日志封装实例
2020/04/08 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
领导批评与自我批评范文
2014/10/16 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
图解上海144收音机
2021/04/22 无线电