<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版2.0DEMO</title>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=DBkKXiL5XbesfoTn4PKoMXVCzSMXsTOn"></script><!-- 这里的ak自己去百度获取-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<!--<link rel="stylesheet" type="text/css" href="css/bmap.css"/>-->
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<input type="button" id="btn" name="btn" value="加点" onclick="addPoint()" />
<input type="button" id="btn1" name="btn1" value="移除事件" onclick="removeEvent()" />
<div id="result"></div>
<div id="aa"></div>
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="qingchu">清楚</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
</body>
</html>
<script type="text/javascript">
var arrPois=[new BMap.Point(116.403984,39.914004) ];//一个数组，用来存放路书的坐标点
var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP}); //设置卫星图为底图
var point = new BMap.Point(111.404, 40.915); // 创建点坐标
map.centerAndZoom(point,5); // 初始化地图,设置中心点坐标和地图级别。
//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
//
function savePoint(){//鼠标示例 鼠标点击拾取坐标点
alert(document.getElementById("test").value);
infoWindow.close();
infoWindow=[];
}
function del(arg){//点击时 地图上添加的点错误时删除
for(var i=0;i<arr.length;i++){
if(arr[i].k==arg){
map.removeOverlay(arr[i].marker);
break;
}
}
}
function addPoint(){//往地图上加点
map.addEventListener('click', clickEvent);
}
function removeEvent(){//移除click事件
map.removeEventListener('click', clickEvent);
infoWindow.close();
infoWindowEdit.close();
}
var k=0;//用来区别marker
var str = "";
// var html = new Array();
var infoWindow; // 将消息框添加到地图中
var infoWindowEdit;
var arr=new Array();//存放添加的点 方便删除
var clickEvent=function(e){
var lat=e.point.lat;
var lng=e.point.lng;
var point = new BMap.Point(lng, lat);
var marker = new BMap.Marker(point); // 创建标注
arrPois.push(new BMap.Point(lng,lat));//往路书的坐标点数组添加数据
map.addOverlay(marker);
arr.push({"lat":lat,"lng":lng,"point":point,"marker":marker,"k":++k});
// html.push(lat,lng);
//html.push();
//str+="";
str += lat+"---"+lng+",";
console.log(str);
document.getElementById('aa').innerText = str;
marker.addEventListener("click", function (e) { //点击时才打开消息框
var newLat=lat;
var newLng=lng;
var m;
for(var i=0;i<arr.length;i++){
if(arr[i].lat==newLat && arr[i].lng==newLng){
m=arr[i].k;
}
}
var val=newLat+"---"+newLng;
var html = [];
html.push("<div class=\"detailCarTip\" style='width:350px;height:100px' >");
html.push("<div style='font-size:14px;font-weight:bold;width:350px;'>" + "(" + "车辆信息title" + ")</div>"); //车辆信息
// html.push("<div style='border-bottom:1px solid #ff0000;style='width:350px;height:100px'></div>"); // 红线
html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:350px;height:100px' ");
html.push("<tr>");
html.push("<td><label>"+ "位置：" +"</label><input type='text' id='test' name='test' value="+"\""+val+"\""+"/></td>");//判断是否同一个marker
// html.push("<td><input type='button' id='test' name='test' value='保存' onclick='savePoint()' /></td><td><input type='button' id='test' name='test' value='删除' onclick=\'del("+m+")\' /></td></td><td><input type='button' id='test' name='test' value='完成' onclick='removeEvent()' /></td>"
// );
html.push("</tr>");
html.push("</table>");
html.push("</div>");
infoWindowEdit = new BMap.InfoWindow(html.join(""), {enableMessage: false,enableCloseOnClick:false}); // 创建信息窗口对象
marker.openInfoWindow(infoWindowEdit); //开启信息窗口
});
}
//新增方法 先创建 infow 这样才能在调用map.openInfoWindow(infoWindow,point);时 默认添加图标就是打开info窗口的
/*
function ceateInfo(map,marker,address,mft_linkman,mft_mobile,point){
var infoWindow=[];
var html = [];
html.push("<div style='width:250px;height:80px' >");
html.push("<div style='font-size:14px;font-weight:bold;width:250px;'>自提地址信息</div>");
html.push("<div style='border-bottom:1px solid #ff0000;style='width:250px;height:80px'></div>"); // 红线
html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:250px;height:80px' ");
html.push("<tr>");
html.push("<td>自提联系人：" + mft_linkman +"</td>");
html.push("</tr>");
html.push("<tr>");
html.push("<td>自提联电话：" + mft_mobile +"</td>");
html.push("</tr>");
html.push("<tr>");
html.push("<td colspan='2'>自提联地址：" + address + "</td>");
html.push("</tr>");
html.push("</table>");
html.push("</div>");
infoWindow = new BMap.InfoWindow(html.join(""), {enableMessage: false}); // 创建信息窗口对象
marker.addEventListener("click", function () {
marker.openInfoWindow(infoWindow); //开启信息窗口
});
map.openInfoWindow(infoWindow,point);
}
*/
//开启绘画功能
var circle = new BMap.Circle(point,1000);
circle.setFillColor("#A6CBA1"); //填充颜色
circle.setStrokeColor("#A6CBA1"); //边线颜色
map.addOverlay(circle); //增加圆
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
enableCalculate: false,
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes : [BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE],
drawingTypes : [
// BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,//圆的样式
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE //矩形的样式
]
},
});
//路书，轨迹回放
var lushu;
// 实例化一个驾车导航用来生成路线
// var drv = new BMap.DrivingRoute('北京', {
// onSearchComplete: function(res) {
// if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
// var plan = res.getPlan(0);
// var arrPois =[];
// for(var j=0;j<plan.getNumRoutes();j++){
// var route = plan.getRoute(j);
// arrPois= arrPois.concat(route.getPath());
// }
// map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
map.setViewport(arrPois);
marker=new BMap.Marker(arrPois[0],{
icon : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
});
var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
marker.setLabel(label);
map.addOverlay(marker);
BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
var pointsArr=[initPos,targetPos]; //点数组
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 10,
step = this._opts.speed / (1000 / timer),
//初始坐标
init_pos = this._projection.lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = this._projection.lngLatToPoint(targetPos),
//总的步长
count = Math.round(me._getDistance(init_pos, target_pos) / step);
//显示折线 syj201607191107
this._map.addOverlay(new BMap.Polyline(pointsArr, {
strokeColor : "#111",
strokeWeight : 5,
strokeOpacity : 0.5
})); // 画线
//如果小于1直接移动到下一点
if (count < 1) {
me._moveNext(++me.i);
return;
}
me._intervalFlag = setInterval(function() {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
//移动的点已经超过总的长度
if(me.i > me._path.length){
return;
}
//运行下一个点
me._moveNext(++me.i);
}else {
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if(currentCount == 1){
var proPos = null;
if(me.i - 1 >= 0){
proPos = me._path[me.i - 1];
}
if(me._opts.enableRotation == true){
me.setRotation(proPos,initPos,targetPos);
}
if(me._opts.autoView){
if(!me._map.getBounds().containsPoint(pos)){
me._map.setCenter(pos);
}
}
}
//正在移动
me._marker.setPosition(pos);
//设置自定义overlay的位置
me._setInfoWin(pos);
}
},timer);
};
lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"粤A30780",//"从天安门到百度大厦"
autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 100,
enableRotation:true,//是否设置marker随着道路的走向进行旋转
landmarkPois:[
{lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
]
});
marker.addEventListener("click",function(){
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
//map.clearOverlays(); //清除所有覆盖物
});
//}
// }
// });
//drv.search('天安门', '百度大厦');
// lushu.start();
// lushu.pause();
//绑定事件
$("run").onclick = function(){
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
// map.clearOverlays(); //清除所有覆盖物
}
$("stop").onclick = function(){
lushu.stop();
}
$("pause").onclick = function(){
lushu.pause();
}
$("hide").onclick = function(){
lushu.hideInfoWindow();
}
$("show").onclick = function(){
lushu.showInfoWindow();
}
$("qingchu").onclick = function(){
map.clearOverlays();
arrPois.splice(1,5000);
//html.splice(0,51);
str = "";
//document.getElementById('aa').innerText = str;
//console.log(arrPois);
document.getElementById('aa').innerHTML = "";
}
function $(element){
return document.getElementById(element);
}
</script>
