使用百度地图绘制地图,并且在地图上绘制折线形成个人轨迹,增加描述与名称,代码如下:
//百度地图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()添加之地图上,随后可以在地图中增加其他自定义方法这些就不贴代码。