百度地图API之折线

来源：互联网发布：r.java是什么文件编辑：程序博客网时间：2024/05/16 05:58

刚接触百度地图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、成功！北斗七星阵已布好

效果如下图：

0 0