【百度地图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先搜索到要去城 ...
随机推荐
- 他们主动布局（autolayout）环境的图像编辑器
hi,all: 在经过了一番犹豫之后.我决定将我自己做的这个小APP的源代码发布给大家: 其出发点是和大家一起学习iOS开发.仅供学习參考之用. 之前代码是托管与gitlab 上的,今天我将其pull ...
- Python学习笔记20：server先进
我们不依赖于一个框架,CGI如果是,只能使用socket介面.他完成了一个可以处理HTTP要求Pythonserver. 基于,不管是什么的计算机的操作系统(推荐Linux)和Python该计算机可被 ...
- 《TCP/IP作品详细解释2：达到》注意事项--ARP:地址解析协议
Net/3于ARP和实施密切与路由表相关联的,下图显示了我们的叙述性说明ARP使用样品. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVE9ERDkxMQ ...
- Maven本地仓库配置
一. 为什么配置? 默认情况下,maven的本地仓库在C盘下用户文件夹: .m2/repository.全部的maven构件(artifact)都被存储到该仓库中.以方便重用. 可是放在C盘一个是占用 ...
- 使用SQLCMD在SQLServer执行多个脚本
原文:使用SQLCMD在SQLServer执行多个脚本 概述: 作为DBA,经常要用开发人员提供的SQL脚本来更新正式数据库,但是一个比较合理的开发流程,当提交脚本给DBA执行的时候,可能已经有几百个 ...
- 人活系列Streetlights （秩）
人活着系列之Streetlights Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 人活着假设是为了家庭,亲情----能够说是在这个世界上最温暖人心的, ...
- 几点思考-人生哲学,生活方式---ShinePans
美结账时账单住酒店一晚800元.她抱怨太贵.经理说这是标准收费,带泳池的酒店.健身房和wifi. 美女说自己全然没使用,经理说饭店有提供.是她自己不用. 女客人打开皮包掏钱付账.但说要扣除经理和她共度 ...
- Android使用SVG矢量创建很酷的动态效率！
尊重原创,欢迎转载.转载请注明: FROM GA_studio http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说.咱们先瞅瞅效果: ...
- 如何解决卸载McAfee时出现“处于托管模式时无法删除”问题(转)
问题现象: 这几天在为客户终端换装杀毒软件时出现这么一个问题:在控制面板的添加或删除程序里面将“McAfee VirusScan Enterprise和 McAfee AntiSpyware Ente ...
- (插播)unity的 异常捕捉和 ios Android 崩溃信息的捕捉。
近期 做些准备性得工作和有意思的事情.所以近期做了一个适合ios和android 错误信息捕捉的unity插件. 两个功能,app崩溃也就是闪退 是开发人员 非常头疼的一件事,还有就是一些莫名得错误 ...