【百度地图API】自定义可编辑的交通路线
任务描述：
我想自己绘制一条从地铁站出口到天安门的道路，而且还需要根据我的喜好来改变这条路线。
如何实现：
鼠标左击地图，绘制路线；双击后，绘制结束；绘制结束后，路线可编辑。
TIPS:
API1.1以后，可以使用enableEditing()来开启折线可编辑功能。
图示：
运行代码，请点击这里。
代码：
<!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自定义地图
http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- HTM L百度地图API 自定义工具地图实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
- 百度地图API 自定义坐标点及图片
var map = new BMap.Map("allmap");var point = new BMap.Point(105.955754,36.525109);map.cent ...
- 【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
- 【百度地图API】暑假放假回老家——城市切换功能
原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...
随机推荐
- JAVA实现DAO基本层CRUD操作
随着shh2各种操作方便框架.越来越多JAVA WEB效率,可是,假设在不了解这些框架使用的场合的情况下,一拿到项目就盲目地选择这些框架进行系统架构的搭建,就有可能造成非常多不是必需的资源浪费. 在项 ...
- 如何在Dreamweaver中使用zen coding
在我发表上一篇<Zen Coding: 一种快速编写HTML/CSS代码的方法>之后,有网友表示不知道怎么在Dreamweaver上使用zen coding插件.OK,今天我就写一篇详细的 ...
- Windows8和Windows Phone应用开发主题编码汇总
原文:Windows8和Windows Phone应用开发主题编码汇总 在Windows 8和Windows Phone应用开发中经常需要自定义一些Windows Store应用风格主题,下面列举一些 ...
- Cocos2d-x 3.x plist+png 做动画
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- C语言easy忽视的细节（第四部分）
前言:本文的目的是记录C这些语言easy忽视的细节.我会每天花一点时间来阅读整理,坚持下去,今天是第一章.也许今天是下个月的第二,明年,今天是第几?--我坚信,,记性不如烂笔头.第四篇了.fight~ ...
- Android 应用程序窗口显示状态操作（requestWindowFeature()的应用）
我们在开发程序是常常会须要软件全屏显示.自己定义标题(使用button等控件)和其它的需求,今天这一讲就是怎样控制Android应用程序的窗口显示. 首先介绍一个重要方法那就是requestWi ...
- Android应用UI架构
这个标题听起来可能有点大.事实上这里主要就是讨论一个应用程序的UI组件,是全用Activity还是全用Fragment.或者是二者皆有.以及使用Activity和Fragment的一些注意事项. A ...
- SQL Server 2008 R2 性能计数器详细列表（三）
原文:SQL Server 2008 R2 性能计数器详细列表(三) SQL Server,Deprecated Features 对象: 监视指定为不推荐使用的功能: SQL Server Depr ...
- 准确率和召回率(precision&recall)
在机器学习.推荐系统.信息检索.自然语言处理.多媒体视觉等领域,常常会用到准确率(precision).召回率(recall).F-measure.F1-score 来评价算法的准确性. 一.准确率和 ...
- Java NIO系列教程（三） Buffer(转)
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...