【百度地图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先搜索到要去城 ...
随机推荐
- Android－管理Activity生命周期 －停止和重启Activity
停止和重启activity在activity的生命周期中很重要,它能让用户感觉你的app总是激活的而且不会丢失他们的进度.activity在下面的这些情况会停止和重启: 用户打开常用app窗口然后从你 ...
- can't connect to mysql server on localhost <10061>
需要启动MySQL服务.它可以通过两种方式来启动使用MySQL: 1.命令行模式. Win+R,进入cmd然后按Enter键.在命令行形式的输入: net start mysql56 mysql56是 ...
- 允许debian wheezy支持IOS7+的iphone.
IOS更新, 连接到数据线,不能使用 我想复制iphone照片只能用于内itunes对? 于linux这里面其实很容易处理. 在这里,我们使用了一个相对较新的组件libimobiledevice 为 ...
- c++学籍管理系统
程序在编译时出错(vc++ 6.0) 求哪位大神帮忙改改 #include<iostream> #include <string> #include<conio.h> ...
- 小谷的战斗Jquery(三)--水平和垂直菜单
日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style=& ...
- HDU 4359 Easy Tree DP? 带权二叉树的构造方法 dp
题意: 给定n deep 1.构造一个n个节点的带权树,且最大深度为deep,每一个节点最多仅仅能有2个儿子 2.每一个节点的值为2^0, 2^1 ··· 2^(n-1) 随意两个节点值不能同样 3 ...
- POJ3581:Sequence(后缀数组)
Description Given a sequence, {A1, A2, ..., An} which is guaranteed A1 > A2, ..., An, you are to ...
- 定向爬虫之爬一爬各个学校新闻的认识（【1】对Url的认识）
昨天早上,我习惯性的打开博客园,看一看别人的写的博客.突然想起,自己好像没有写过什么博客,所以就心血来潮,把我现在做得事情写出来, 这也是对我目前的学习的一种总结.望大神指点.... 对于一间学校的新 ...
- 基于Hadoop2.2.0版本号分布式云盘的设计与实现
基于Hadoop2.2.0版本号分布式云盘的设计与实现 一.前言 在学习了hadoop2.2一个月以来,我重点是在学习hadoop2.2的HDFS.即是hadoop的分布式系统,看了非常久的源代码看的 ...
- 将android界面背景设置为黑色
屏幕背景设置为黑色的几种方式: 新建项目时候 第二次next之后(不同sdk版本号可能不同),Background Color项点击可选. 开公布局文件,选择视图查看 就是下边二个选项卡中的第一个(G ...