【百度地图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先搜索到要去城 ...
随机推荐
- Jenkins(二) 安装、新建Jobs与删除及SVN配置（转）
官网首页(https://jenkins-ci.org/)就提供了windows版本的Jenkins安装包.可以自己下载一个用于学习.安装后自动打开http://localhost:8080,就可以看 ...
- Oracle中merge into的使用 (转)
该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中,使用此命令必须同时指定UPDATE 和INSERT 关键词,ORACLE 10g 做了如下改动. 1.ins ...
- JAVA中的I/O流以及文件操作
一 JAVA语言中主要通过流来完成IO操作. 流:计算机的输入输出之间流动的数据序列,也是类的对象.java中的流方式就像是建立在数据交换源和目的之间的一条通信路径. 数据源:计算机中的数据源是指可以 ...
- 《web全栈工程师的自我修养》阅读笔记
在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...
- Teams（uva11609+组合）
I - Teams Time Limit:1000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit cid=7795 ...
- Visual Studio Team Services使用教程--添加团队成员
- Windows Phone 8 ControlTiltEffect
/* Copyright (c) 2010 Microsoft Corporation. All rights reserved. Use of this sample source code is ...
- 【MySQL案件】ERROR 1665 (HY000)
转载请注明: http://blog.csdn.net/jason_asia/article/details/36240815 1.1.1. ERROR 1665 (HY000) [环境的叙述性说明] ...
- 记录一次有用的stackoverflow搜索
经常逛stackoverflow有一段时间了,也遇到了不少问题 问题: 1.ckeditor中在source中输入如下代码 2.再点击source按钮,查看页面显示效果,不对啊 3.然后再检查源码,发 ...
- SQL SERVER 内存分配及常见内存问题（1）——简介
原文:SQL SERVER 内存分配及常见内存问题(1)--简介 一.问题: 1.SQL Server 所占用内存数量从启动以后就不断地增加: 首先,作为成熟的产品,内存溢出的机会微乎其微.对此要了解 ...