开发者社区> 杰克.陈> 正文

【百度地图API】自定义可编辑的交通路线

简介: 原文:【百度地图API】自定义可编辑的交通路线 任务描述:   我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线。   如何实现:   鼠标左击地图,绘制路线;双击后,绘制结束;绘制结束后,路线可编辑。
+关注继续查看
原文:【百度地图API】自定义可编辑的交通路线

任务描述:

  我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线。

 

如何实现:

  鼠标左击地图,绘制路线;双击后,绘制结束;绘制结束后,路线可编辑。

 

TIPS:

  API1.1以后,可以使用enableEditing()来开启折线可编辑功能。

 

图示:

  img_ce6306b43db8e0f142162ae58f7eeba4.png

 

运行代码,请点击这里

 

代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义可编辑路线</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container">
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(
new BMap.Point(116.404, 39.915), 18);
var e1,e2;
var p = []; //用来存储折线的点
var polyline;
var doneDraw = 0; //判断是否绘制折线结束
map.addEventListener("click",function(e1){ //当鼠标单击时
if(doneDraw == 0){ //判断是否绘制曲线完毕
p.push(new BMap.Point(e1.point.lng,e1.point.lat)) //存储曲线上每个点的经纬度
if(polyline){polyline.setPoints(p);} //如果曲线存在,则获取折线上的点
else{polyline = new BMap.Polyline(p);} //如果折线不存在,就增加此点
if(p.length<2){return ;} //当折线上的点只有一个时,不绘制
map.addOverlay(polyline); //绘制曲线
}
});
map.addEventListener(
"dblclick",function(e2){ //当鼠标双击时:结束绘制,并可以编辑曲线
alert("绘制完成");
doneDraw
= 10;
polyline.enableEditing();
});
</script>
</html>

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【百度地图API】如何实现信息窗口轮询
原文:【百度地图API】如何实现信息窗口轮询 摘要:   很多微博或者SNS开发者,想结合地图展示用户的微博或者状态。这时,利用信息窗口就是最好的展示方式了。   在这里,我们使用信息窗口轮询的方式来实现这一功能。
1069 0
【百度地图API】如何制作可拖拽的沿道路测距
原文:【百度地图API】如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼。可是,这只能测任意两点的直线距离,用途不够实际啊。比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然“沿道路测距”就显得尤为重要了。
1089 0
Confluence 6 编辑自定义 Decorators
希望对 Confluence 的 decorator 进行编辑的话,你需要具有良好的 HTML 知识和能够理解  Velocity 模板语言。
822 0
【百度地图API】如何批量转换为百度经纬度
原文:【百度地图API】如何批量转换为百度经纬度 摘要:      百度地图API的官网上提供了常用坐标转换的示例。但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考。
1469 0
如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
原文:如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口 摘要:   想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼?那赶快来学习吧。(以酷讯为例,如下图)      更多成功案例请点击:http://dev.
1190 0
透过【百度地图API】分析双闭包问题
原文:透过【百度地图API】分析双闭包问题 摘要:   有位API爱好者问到,昨天的教程里为什么不使用for循环?他使用for循环后,也发现代码无效。这是什么原因? -----------------------------------------------------------------...
748 0
【百度地图API】如何给自定义覆盖物添加事件
原文:【百度地图API】如何给自定义覆盖物添加事件 摘要:   给marker、lable、circle等Overlay添加事件很简单,直接addEventListener即可。那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ -----------------------------...
871 0
【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据
原文:【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画。可是,百度地图的道路数据并没有公开。
1672 0
【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:【百度地图API】如何制作多途经点的线路导航——驾车篇 摘要:   休假结束,酸奶小妹要从重庆驾车去北京。可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ---------------------------------------------------...
1877 0
+关注
杰克.陈
一个安静的程序猿~
10425
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载