1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>百度离线版2.0DEMO</title>
6 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak="></script><!-- 这里的ak自己去百度获取-->
7 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
8 <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
9 <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
10 <!--加载检索信息窗口-->
11 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
12 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
13 <link rel="stylesheet" type="text/css" href="css/bmap.css"/>
14 </head>
15 <body>
16 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
17 <input type="button" id="btn" name="btn" value="加点" onclick="addPoint()" />
18 <input type="button" id="btn" name="btn" value="移除事件" onclick="removeEvent()" />
19 <div id="result"></div>
20 <button id="run">开始</button>
21 <button id="stop">停止</button>
22 <button id="pause">暂停</button>
23 <button id="hide">隐藏信息窗口</button>
24 <button id="show">展示信息窗口</button>
25 </body>
26 </html>
27 <script type="text/javascript">
28 var arrPois=[new BMap.Point(116.403984,39.914004) ];//一个数组，用来存放路书的坐标点
29 var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP}); //设置卫星图为底图
30 var point = new BMap.Point(111.404, 40.915); // 创建点坐标
31 map.centerAndZoom(point,5); // 初始化地图,设置中心点坐标和地图级别。
32
33 //map.addControl(new BMap.MapTypeControl());
34 map.addControl(new BMap.NavigationControl());
35 map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
36 map.enableKeyboard(); // 启用键盘操作。
37 //map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
38
39 //
40 function savePoint(){//鼠标示例 鼠标点击拾取坐标点
41 alert(document.getElementById("test").value);
42 infoWindow.close();
43 infoWindow=[];
44 }
45 function del(arg){//点击时 地图上添加的点错误时删除
46 for(var i=0;i<arr.length;i++){
47 if(arr[i].k==arg){
48 map.removeOverlay(arr[i].marker);
49 break;
50 }
51 }
52 }
53 function addPoint(){//往地图上加点
54 map.addEventListener('click', clickEvent);
55 }
56 function removeEvent(){//移除click事件
57 map.removeEventListener('click', clickEvent);
58 infoWindow.close();
59 infoWindowEdit.close();
60 }
61 var k=0;//用来区别marker
62 var infoWindow; // 将消息框添加到地图中
63 var infoWindowEdit;
64 var arr=new Array();//存放添加的点 方便删除
65 var clickEvent=function(e){
66 var lat=e.point.lat;
67 var lng=e.point.lng;
68 var point = new BMap.Point(lng, lat);
69 var marker = new BMap.Marker(point); // 创建标注
70 arrPois.push(new BMap.Point(lng,lat));//往路书的坐标点数组添加数据
71 map.addOverlay(marker);
72 arr.push({"lat":lat,"lng":lng,"point":point,"marker":marker,"k":++k});
73 var html = [];
74 html.push("<div class=\"detailCarTip\" style='width:350px;height:100px' >");
75 html.push("<div style='font-size:14px;font-weight:bold;width:350px;'>" + "(" + "车辆信息title" + ")</div>"); //车辆信息
76 html.push("<div style='border-bottom:1px solid #ff0000;style='width:350px;height:100px'></div>"); // 红线
77 html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:350px;height:100px' ");
78 html.push("<tr>");
79 html.push("<td><label>"+ "位置：" +"</label><input type='text' id='test' name='test' /></td>");
80 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("+k+")\' /></td></td><td><input type='button' id='test' name='test' value='完成' onclick='removeEvent()' /></td>"
81 );
82 html.push("</tr>");
83 html.push("</table>");
84 html.push("</div>");
85 infoWindow = new BMap.InfoWindow(html.join(""), {enableMessage: false,enableCloseOnClick:false}); // 创建信息窗口对象
86 marker.openInfoWindow(infoWindow); //开启信息窗口
87
88
89
90
91 marker.addEventListener("click", function (e) { //点击时才打开消息框
92 var newLat=lat;
93 var newLng=lng;
94 var m;
95 for(var i=0;i<arr.length;i++){
96 if(arr[i].lat==newLat && arr[i].lng==newLng){
97 m=arr[i].k;
98 }
99 }
100 var val=newLat+"---"+newLng;
101 var html = [];
102 html.push("<div class=\"detailCarTip\" style='width:350px;height:100px' >");
103 html.push("<div style='font-size:14px;font-weight:bold;width:350px;'>" + "(" + "车辆信息title" + ")</div>"); //车辆信息
104 html.push("<div style='border-bottom:1px solid #ff0000;style='width:350px;height:100px'></div>"); // 红线
105 html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:350px;height:100px' ");
106 html.push("<tr>");
107 html.push("<td><label>"+ "位置：" +"</label><input type='text' id='test' name='test' value="+"\""+val+"\""+"/></td>");//判断是否同一个marker
108 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>"
109 );
110 html.push("</tr>");
111 html.push("</table>");
112 html.push("</div>");
113 infoWindowEdit = new BMap.InfoWindow(html.join(""), {enableMessage: false,enableCloseOnClick:false}); // 创建信息窗口对象
114 marker.openInfoWindow(infoWindowEdit); //开启信息窗口
115 });
116
117 }
118
119 //新增方法 先创建 infow 这样才能在调用map.openInfoWindow(infoWindow,point);时 默认添加图标就是打开info窗口的
120
121 /*
122
123 function ceateInfo(map,marker,address,mft_linkman,mft_mobile,point){
124 var infoWindow=[];
125 var html = [];
126 html.push("<div style='width:250px;height:80px' >");
127 html.push("<div style='font-size:14px;font-weight:bold;width:250px;'>自提地址信息</div>");
128 html.push("<div style='border-bottom:1px solid #ff0000;style='width:250px;height:80px'></div>"); // 红线
129 html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:250px;height:80px' ");
130 html.push("<tr>");
131 html.push("<td>自提联系人：" + mft_linkman +"</td>");
132 html.push("</tr>");
133 html.push("<tr>");
134 html.push("<td>自提联电话：" + mft_mobile +"</td>");
135 html.push("</tr>");
136 html.push("<tr>");
137 html.push("<td colspan='2'>自提联地址：" + address + "</td>");
138 html.push("</tr>");
139 html.push("</table>");
140 html.push("</div>");
141 infoWindow = new BMap.InfoWindow(html.join(""), {enableMessage: false}); // 创建信息窗口对象
142 marker.addEventListener("click", function () {
143 marker.openInfoWindow(infoWindow); //开启信息窗口
144 });
145 map.openInfoWindow(infoWindow,point);
146 }
147 */
148 //开启绘画功能
149 var circle = new BMap.Circle(point,1000);
150 circle.setFillColor("#A6CBA1"); //填充颜色
151 circle.setStrokeColor("#A6CBA1"); //边线颜色
152 map.addOverlay(circle); //增加圆
153
154 var drawingManager = new BMapLib.DrawingManager(map, {
155 isOpen: false, //是否开启绘制模式
156 enableDrawingTool: true, //是否显示工具栏
157 enableCalculate: false,
158 drawingToolOptions: {
159 anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
160 offset: new BMap.Size(5, 5), //偏离值
161 drawingModes : [BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE],
162 drawingTypes : [
163 // BMAP_DRAWING_MARKER,
164 BMAP_DRAWING_CIRCLE,//圆的样式
165 BMAP_DRAWING_POLYLINE,
166 BMAP_DRAWING_POLYGON,
167 BMAP_DRAWING_RECTANGLE //矩形的样式
168 ]
169 },
170 });
171
172
173 //路书，轨迹回放
174 var lushu;
175 // 实例化一个驾车导航用来生成路线
176 // var drv = new BMap.DrivingRoute('北京', {
177 // onSearchComplete: function(res) {
178 // if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
179 // var plan = res.getPlan(0);
180 // var arrPois =[];
181 // for(var j=0;j<plan.getNumRoutes();j++){
182 // var route = plan.getRoute(j);
183 // arrPois= arrPois.concat(route.getPath());
184 // }
185
186 // map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
187 map.setViewport(arrPois);
188 marker=new BMap.Marker(arrPois[0],{
189 icon : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
190 });
191 var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
192 label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
193 marker.setLabel(label);
194
195 map.addOverlay(marker);
196 BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
197 var pointsArr=[initPos,targetPos]; //点数组
198 var me = this,
199 //当前的帧数
200 currentCount = 0,
201 //步长，米/秒
202 timer = 10,
203 step = this._opts.speed / (1000 / timer),
204 //初始坐标
205 init_pos = this._projection.lngLatToPoint(initPos),
206 //获取结束点的(x,y)坐标
207 target_pos = this._projection.lngLatToPoint(targetPos),
208 //总的步长
209 count = Math.round(me._getDistance(init_pos, target_pos) / step);
210 //显示折线 syj201607191107
211 this._map.addOverlay(new BMap.Polyline(pointsArr, {
212 strokeColor : "#111",
213 strokeWeight : 5,
214 strokeOpacity : 0.5
215 })); // 画线
216 //如果小于1直接移动到下一点
217 if (count < 1) {
218 me._moveNext(++me.i);
219 return;
220 }
221 me._intervalFlag = setInterval(function() {
222 //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
223 if (currentCount >= count) {
224 clearInterval(me._intervalFlag);
225 //移动的点已经超过总的长度
226 if(me.i > me._path.length){
227 return;
228 }
229 //运行下一个点
230 me._moveNext(++me.i);
231 }else {
232 currentCount++;
233 var x = effect(init_pos.x, target_pos.x, currentCount, count),
234 y = effect(init_pos.y, target_pos.y, currentCount, count),
235 pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
236 //设置marker
237 if(currentCount == 1){
238 var proPos = null;
239 if(me.i - 1 >= 0){
240 proPos = me._path[me.i - 1];
241 }
242 if(me._opts.enableRotation == true){
243 me.setRotation(proPos,initPos,targetPos);
244 }
245 if(me._opts.autoView){
246 if(!me._map.getBounds().containsPoint(pos)){
247 me._map.setCenter(pos);
248 }
249 }
250 }
251 //正在移动
252 me._marker.setPosition(pos);
253 //设置自定义overlay的位置
254 me._setInfoWin(pos);
255 }
256 },timer);
257 };
258 lushu = new BMapLib.LuShu(map,arrPois,{
259 defaultContent:"粤A30780",//"从天安门到百度大厦"
260 autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
261 icon : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
262 speed: 100,
263 enableRotation:true,//是否设置marker随着道路的走向进行旋转
264 landmarkPois:[
265 {lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
266 ]
267
268 });
269
270 marker.addEventListener("click",function(){
271 marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
272 marker.hide();
273 lushu.start();
274 //map.clearOverlays(); //清除所有覆盖物
275 });
276 //}
277 // }
278 // });
279 //drv.search('天安门', '百度大厦');
280 // lushu.start();
281 // lushu.pause();
282 //绑定事件
283 $("run").onclick = function(){
284 marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
285 marker.hide();
286 lushu.start();
287 // map.clearOverlays(); //清除所有覆盖物
288 }
289 $("stop").onclick = function(){
290 lushu.stop();
291 }
292 $("pause").onclick = function(){
293 lushu.pause();
294 }
295 $("hide").onclick = function(){
296 lushu.hideInfoWindow();
297 }
298 $("show").onclick = function(){
299 lushu.showInfoWindow();
300 }
301 function $(element){
302 return document.getElementById(element);
303 }
304
305 </script>
浙公网安备 33010602011771号