参考地址 百度地图绘制轨迹点
没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。
控件可以根据自己的需求添加 位置通过offset：new BMAP.Size(x,y)进行微调
事实路况信息需要通过引没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。
控件可以根据自己的需求添加 位置通过offset：new BMAP.Size(x,y)进行微调
3D视图部分城市没有开放开放 根据需求自己添加
事实路况信息需要通过引入入
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:100%;width:100%;}
#r-result{width:100%; font-size:14px;position: absolute;top:45%;left:40px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙"></script> <!-- 百度地图开放平台自己申请-->
<title>城市名定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" value="107.17064545"/>
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" value="34.36408081"/>
</div>
</body>
</html>
<script type="text/javascript">
//画线需要的坐标数组，每n秒更新一次
var coordinateArr = [];
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(107.17064545,34.36408081), 14);
map.centerAndZoom("宝鸡",14);
map.enableScrollWheelZoom(true);
/* step-1 添加导航控件*/
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT,// 靠右上角位置
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
enableGeolocation: true, // 启用显示定位
offset: new BMap.Size(20,230)
});
/*step-2 添加地图类型和缩略图*/
var mapType1 = new BMap.MapTypeControl({
anchor:BMAP_ANCHOR_BOTTOM_LEFT,
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
});
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(mapType1);
mapType1.setOffset(new BMap.Size(20,100));
map.addControl(overView);
map.addControl(overViewOpen);
overViewOpen.setOffset(new BMap.Size(20,60));
/*step-3 添加比例尺*/
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
top_left_control.setOffset(new BMap.Size(20,128));
map.addControl(top_left_control);
// 用经纬度设置地图中心点
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
coordinateArr.push(new_point);
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 26), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var marker = new BMap.Marker(new_point,{icon:myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point); //小车在地图中心
}
}
//自动改变经纬度
var randoms = 0;
function min(){
document.getElementById("longitude").value-=0.0000681;
}
//绘制轨迹
function drawLine(){
var polyline = new BMap.Polyline(coordinateArr, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.6});
map.addOverlay(polyline);
}
setInterval("min()",1000);
setInterval("theLocation()",2000);//定位
setInterval("drawLine()",500);//绘制轨迹
</script>