百度地图绘制折线,保存动态读取

来源:互联网 发布:山阴俞氏 知乎 编辑:程序博客网 时间:2024/05/22 09:48

使用百度地图绘制地图,并且在地图上绘制折线形成个人轨迹,增加描述与名称,代码如下:

//百度地图API功能        map = new BMap.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
创建百度地图实例,
//添加地图控件var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮map.addControl(top_left_control);        map.addControl(top_left_navigation);     map.addControl(top_right_navigation);
在地图上添加空间
var styleOptions = {
           strokeColor:"#4B0082",    //边线颜色。           fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。           strokeWeight: 3,       //边线的宽度,以像素为单位。           strokeOpacity: 0.8,   //边线透明度,取值范围0 - 1。           fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。           strokeStyle: 'solid' //边线的样式,solid或dashed。     } //实例化鼠标绘制工具      var drawingManager = new BMapLib.DrawingManager(map, {          isOpen: false, //是否开启绘制模式          enableDrawingTool: true, //是否显示工具栏          drawingToolOptions: {              anchor: BMAP_ANCHOR_TOP_RIGHT, //位置              offset: new BMap.Size(5, 5), //偏离值              drawingModes: [                                   BMAP_DRAWING_POLYLINE                ]          },          polylineOptions: styleOptions, //线的样式      }); 
绘制折线后,保存为文件,每次动态读取代码如下:
 var polylinePointsArray = [];for(var i = 0;i<result.length;i++){  polylinePointsArray.push(new BMap.Point(result[i].lng,result[i].lat));}objPolyline = new BMap.Polyline(polylinePointsArray, {strokeColor:"#4B0082", strokeWeight:3, strokeOpacity:0.8,fillOpacity: 0.6, strokeStyle: 'solid'});
循环遍历数据将数据组装起来,形成折线对象。使用map.addOverlay()添加之地图上,随后可以在地图中增加其他自定义方法这些就不贴代码。

 




0 0