【百度地图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先搜索到要去城 ...
随机推荐
- 【C语言探索之旅】 第二部分第九课： 实战"悬挂小人"游戏 答案
内容简介 1.课程大纲 2.第二部分第九课: 实战"悬挂小人"游戏 答案 3.第二部分第十课预告: 安全的文本输入 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题, ...
- 【转】Directx11 HelloWorld之HLSL的Effect框架的使用
最近尝试用了下Directx下的Effect框架,作为一初学者初学者,说下为什么我们要使用Effect框架及其好处吧. 首先Effect最大好处的就是简单,使得编写Shader绘制的程序工作量大大下降 ...
- JAVA中的super和this关键字的使用
一 this关键字 this关键字可以出现在构造方法和实例方法中,不能出现在静态方法中,这是因为静态方法可以用类名来调用,这时可能还没有任何对象诞生. this主要有两种用法: 1 用在构造方法中,调 ...
- ASP.NET MVC 5– 采用Wijmo MVC 5模板1创建应用程序分钟
启用 采用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用,首先要做的就是安装pid=4&from=MVC4DOC">Studio f ...
- 【Java】【Flume】Flume-NG源代码分析的启动过程（两）
本节分析配置文件的解析,即PollingPropertiesFileConfigurationProvider.FileWatcherRunnable.run中的eventBus.post(getCo ...
- passenger nginx
sudo dd if=/dev/zero of=/swap bs=1M count=1024 sudo mkswap /swap sudo swapon /swap Nginx with Passen ...
- HDU 1988 Cube Stacking （数据结构-并检查集合）
Cube Stacking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 18834 Accepted: 6535 Ca ...
- 【cocos2d-js公文】十八、Cocos2d-JS v3.0物业风格API
1. 新的API风格 我们直接来看看你能够怎样使用Cocos2d-JS v3.0: 曾经的API 新的API node.setPosition(x, y); node.x = x; node.y = ...
- 安装程序添加iis的方法经验分享
原文:安装程序添加iis的方法经验分享 网上有一些这样的方法,但我这里主要做一些对比和扩充 网上这方面的文章的岁数比较大,server 08R2和win7出来后,整理这方面的资料的文章没找到,所以这里 ...
- JavaEE(10) - Session EJB的依赖注入、引用及任务调度
1. EJB依赖注入 #1. EJB开发(Net Beans创建EJB Module, 项目名称:CallHello) Hello.java package org.crazyit.service; ...