百度地图API之折线

刚接触百度地图api不久，再根据坐标数据画折线上，伤了不少脑筋，使用它想小伙伴们多，文档也算丰富，

现总结下在地图上折线的表示。

地图官方例子参考：http://developer.baidu.com/map/jsdemo.htm#a1_2

1、引用地图api

如：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

2、准备地图渲染的容器及设置地图大小

如：

<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

3、创建地图：

（1）创建地图；

（2）定义中心坐标；

（3）设置地图等级并将地图显示在容器中

如：

 var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图var point = new BMap.Point(122.263053,29.726606);//定义一个中心点坐标map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中

4、描点添加覆盖物（折线）

所有代码如下：

<!DOCTYPE html>
<html>
<head><title>BMap API</title><meta charset="utf-8" /><!--引用百度地图API--><style type="text/css">html,body{margin:0;padding:0;}.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><script type="text/javascript" src="js/arrow.js"></script>
</head><body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">//创建和初始化地图函数：function initMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addPolyline();//向地图中添加线}//创建地图函数：function createMap(){var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图var point = new BMap.Point(122.263053,29.726606);//定义一个中心点坐标map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = map;//将map变量存储在全局}//地图事件设置函数：function setMapEvent(){map.enableDragging();//启用地图拖拽事件，默认启用(可不写)map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map.enableKeyboard();//启用键盘上下左右键移动地图}//地图控件添加函数：function addMapControl(){//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}//标注线数组var plPoints = [{weight:2,color:"blue",opacity:0.6,points:["122.251285|29.732870","122.25734|29.735576","122.26043|29.731436","122.256262|29.728614","122.257418|29.7253407","122.257783|29.722075","122.2649623|29.720381"]}];//向地图中添加线函数function addPolyline(){for(var i=0;i<plPoints.length;i++){var json = plPoints[i];var points = [];for(var j=0;j<json.points.length;j++){var p1 = json.points[j].split("|")[0];var p2 = json.points[j].split("|")[1];points.push(new BMap.Point(p1,p2));}var line = new BMap.Polyline(points,{strokeWeight:json.weight,strokeColor:json.color,strokeOpacity:json.opacity});map.addOverlay(line);addArrow(line);}}initMap();//创建和初始化地图
</script>
</html>

5、添加注标，文字标签及样式

标注js文件如下：

function addArrow(line){ //绘制标注的函数var linePoint=line.getPath();//线的坐标串var arrowCount=linePoint.length;var end = new BMap.Marker(linePoint[linePoint.length-1]);  // 创建标注map.addOverlay(end);               // 将标注添加到地图中end.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/stop_icon.png", new BMap.Size(11,11));for(var i =0;i<arrowCount;i++){ //在拐点处添加标注var marker = new BMap.Marker(linePoint[i],{icon:myIcon});  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中var label = new BMap.Label("北斗第"+(i+1)+"星",{offset:new BMap.Size(20,-10)});label.setStyle({color : "blue",fontSize : "10px",height : "15px",lineHeight : "15px",backgroundColor:"rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important",//设置背景色透明border:"1px solid blue"});marker.setLabel(label);}
}

6、成功！北斗七星阵已布好

效果如下图：

百度地图API之折线相关推荐

（更新源码）AndroidStudio新手开发：天气app（百度地图api+和风天气api+城市查询+折线展示）
AndroidStudio新手开发:天气app(百度地图api+和风天气api+城市查询+折线展示) 1.内容简介 2.环境配置 3.导入他人demo 4.AS项目分析 5.天气项目流程 6.数据探寻 ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
【百度地图API】多家地图API内存消耗对比测验（带源码）
任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为"世界文化遗产"的寺庙,叫做"双林寺".双林寺的精致 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

百度地图API之折线

百度地图API之折线相关推荐

最新文章

热门文章