惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
GbyAI
GbyAI
Google DeepMind News
Google DeepMind News
Jina AI
Jina AI
B
Blog
aimingoo的专栏
aimingoo的专栏
酷 壳 – CoolShell
酷 壳 – CoolShell
T
The Blog of Author Tim Ferriss
Last Week in AI
Last Week in AI
月光博客
月光博客
H
Help Net Security
V
Visual Studio Blog
量子位
A
About on SuperTechFans
博客园 - Franky
人人都是产品经理
人人都是产品经理
N
Netflix TechBlog - Medium
云风的 BLOG
云风的 BLOG
雷峰网
雷峰网
Martin Fowler
Martin Fowler
Microsoft Security Blog
Microsoft Security Blog
博客园 - 叶小钗
P
Proofpoint News Feed
MongoDB | Blog
MongoDB | Blog

Fooleap's Blog

渴望理想 | Fooleap's Blog 19 年底一些事 | Fooleap's Blog 藉秋风,跑起来 | Fooleap's Blog 一个人去跑步 | Fooleap's Blog 8 月的跑量仿佛是那暑假的作业 | Fooleap's Blog 三伏天跑步那么难受,为何还要跑? | Fooleap's Blog 解决小程序开发“当前系统代理不是安全代理” | Fooleap's Blog 忘却配速的夏日跑步 | Fooleap's Blog 六月天时“带水”跑步更爽 | Fooleap's Blog 出来混迟早要还的 | Fooleap's Blog 跑步不能当饭吃 | Fooleap's Blog 将京东移动端详情页链接转为 PC 端 | Fooleap's Blog 不是热就是雨 | Fooleap's Blog 这半月,我跑了 11 个 520 | Fooleap's Blog 跑完流汗一时爽,一直流汗一直爽 | Fooleap's Blog 初夏夜跑 | Fooleap's Blog Electron 中打开 QQ 临时会话 | Fooleap's Blog 春节期间的培隆角 | Fooleap's Blog 从春天跑到夏天 | Fooleap's Blog 晨雾中奔跑 | Fooleap's Blog 漫步春雨中 | Fooleap's Blog 跑在木棉花下 | Fooleap's Blog 我在春节依然坚持跑步 | Fooleap's Blog 伴随着日出跑步 | Fooleap's Blog 没有最好,只有更好 | Fooleap's Blog 电子气温计 | Fooleap's Blog 渡亭小学的金凤花 | Fooleap's Blog 随心而跑 | Fooleap's Blog 2018 跑步小结 | Fooleap's Blog 在 gVim 中使用“非等宽字体” | Fooleap's Blog
百度地图 API 绘制折线 | Fooleap's Blog
fooleap · 2015-08-23 · via Fooleap's Blog

想要在百度地图上画一条自定义路线,路线说白了就是折线,使用百度地图 JS API 画折线可以使用 Polyline 类来实现。

获取密钥

首先在 百度开放服务平台 注册百度开发者帐号(可以使用百度帐号直接登录)。

然后在 百度地图 LBS 开放平台 创建应用。

根据所需要的设置并提交,便可以看到访问密钥 ak(AccessKey)。

创建地图

无论使用百度地图 API 做什么,首先都得显示地图,除去乱七八糟的东西,显示地图最主要的是中心点坐标以及缩放级别。

以上可以通过 Map 类的 centerAndZoom 方法来实现,关于 Map 类具体可参考:Map 类

下面以潮汕为例,显示一个地图,除却 JS 代码,还需要设置地图所在 DIV 的宽高。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<div id="map"></div>
<script type="text/javascript">
var map = new BMap.Map("map");//创建地图实例
var point = new BMap.Point(116.43,23.4);//创建坐标点
map.centerAndZoom(point, 10);//设置中心坐标及默认缩放级别
</script>

创建坐标点

其实这个在上面已经有过实例,点一般由经度和纬度确定。百度地图使用 Point 类实现,具体可看:Point 类

创建一个坐标点只需要指定一个经度及一个纬度即可,例如:

var point = new BMap.Point(116.43,23.4);

绘制折线

开头说到,百度地图的折线可以由 Polyline 类来实现,Polyline 类的具体文档可以看:Polyline 类

折线有若干个折点,所以不可避免的要设置这些坐标点。根据文档,创建折线对象需要设置点的数组。折线属于覆盖物,需要用到 Map 类的 addOverlay 方法将其覆盖到地图上。

下面以横穿潮汕大地的杭深线为例,获取坐标点可以使用 Google Earth 绘制路径,导出 KML 文件后使用百度坐标转换 API 进行批量转换。具体可参考这篇:百度地图坐标转换

Google Earth 上的路径 Google Earth 上的路径

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<div id="map"></div>
<script type="text/javascript">
var map = new BMap.Map("map");//创建地图实例
var point = new BMap.Point(116.43,23.43);//创建坐标点
var points = [ 
  new BMap.Point(117.270591,23.812975), 
  new BMap.Point(117.227819,23.814327), 
  new BMap.Point(117.171452,23.800036), 
  new BMap.Point(117.132368,23.791609), 
  new BMap.Point(117.076919,23.764658), 
  new BMap.Point(117.024827,23.754510), 
  new BMap.Point(116.981047,23.739533), 
  new BMap.Point(116.939091,23.717617), 
  new BMap.Point(116.900199,23.699399), 
  new BMap.Point(116.885031,23.689196), 
  new BMap.Point(116.874584,23.679668), 
  new BMap.Point(116.811841,23.626940), 
  new BMap.Point(116.759632,23.604713), 
  new BMap.Point(116.725061,23.587160), 
  new BMap.Point(116.651402,23.566650), 
  new BMap.Point(116.595323,23.545934), 
  new BMap.Point(116.565463,23.533553), 
  new BMap.Point(116.552337,23.519046), 
  new BMap.Point(116.544596,23.508704), 
  new BMap.Point(116.537630,23.464337), 
  new BMap.Point(116.528264,23.443634), 
  new BMap.Point(116.518571,23.425543), 
  new BMap.Point(116.502256,23.414608), 
  new BMap.Point(116.429954,23.388459), 
  new BMap.Point(116.388039,23.368854), 
  new BMap.Point(116.352537,23.347284), 
  new BMap.Point(116.281605,23.327247), 
  new BMap.Point(116.227800,23.293717), 
  new BMap.Point(116.214108,23.280499), 
  new BMap.Point(116.180527,23.247139), 
  new BMap.Point(116.107918,23.134458), 
  new BMap.Point(116.040802,23.102683), 
  new BMap.Point(116.005375,23.071510), 
  new BMap.Point(115.979189,23.052335), 
  new BMap.Point(115.874687,23.017842), 
  new BMap.Point(115.732058,22.949055), 
  new BMap.Point(115.650940,22.903134), 
  new BMap.Point(115.559445,22.859811), 
];//设置坐标数组
var polyline = new BMap.Polyline(points);//创建折线
map.centerAndZoom(point, 10);//设置中心坐标及默认缩放级别
map.addOverlay(polyline);//将折线覆盖到地图上
</script>

本文仅仅介绍使用百度地图 API 如何创建折线,若想制作更多更有趣的地图,还请参考百度地图 JavaScript API 文档

本文历史

  • 2015 年 08 月 23 日 完成初稿

最近更新

猜你喜欢