百度地圖api 自定義駕車線路規劃車輛實時定位

阿新 • • 發佈：2019-02-01

var coordinateArr = [] //定義一個全聚德所有的繪製線路點座標陣列 var icona = []; //定義標註圖示陣列 var zhandianpoint = []; //定義站點座標陣列 var map = new BMap.Map("allmap"); map.enableScrollWheelZoom(true); //可以縮放移動 map.centerAndZoom(new BMap.Point(122.187499, 37.974944), 10); //新增縮略地圖控制元件 //設定標註的圖示 var icon1 = new

BMap.Icon("image/shang.png", new BMap.Size(25, 33)); //上車點 var icon2 = new BMap.Icon("image/xia.png", new BMap.Size(25, 33)); //下車點 var icon3 = new BMap.Icon("image/tujing.png", new BMap.Size(25, 25)); //站點 //var icon4 = new BMap.Icon("", new BMap.Size(25, 25)); //站點 icona.push(icon1); //將圖示物件存入陣列

icona.push(icon2); //將圖示物件存入陣列 icona.push(icon3); //將圖示物件存入陣列 //icona.push(icon4); $(document).ready(function() { //獲取站點資訊 $.get("js/zhandianceshi.json", function(d) { $.each(d.data, function(idx, item) { // if(idx == 0) { // return true; //同countinue，返回false同break

// } var lng_lat = this.geometry.coordinates; //獲取接送資料 var point = new BMap.Point(lng_lat[0], lng_lat[1]); // 建立點 zhandianpoint.push(point); //將所有點座標給陣列 // 建立標註座標設定所有點座標圖片這個一定要在迴圈裡面 if(this.jiuzheng!==1){ var marker = new BMap.Marker(point, { icon: icona[2] }); map.addOverlay(marker); var content = "<div style='overflow:hidden;width:300px;'>"; //設定標註資訊這個也要在迴圈裡面這是寫的上車下車 content = content + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + this.geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + this.name + "</span></p>"; content = content + "<div style=' width:50% ; float: left;overflow:hidden;'>"; content = content + "<img src='" + this.image1 + "'style='width:140px;height:105px;'/>"; content = content + "<span style='width:140px;display: inline-block;font-size:12px;'>" + this.title1 + "</span>"; content = content + "</div>"; content = content + "<div style=' width:50% ; float:right;overflow:hidden;'>"; content = content + "<img src='" + this.image2 + "'style='width:140px;height:105px;'/>"; content = content + "<span style='width:140px;display: inline-block;font-size:12px;'>" + this.title2 + "</span>"; content = content + "</div>"; content += "</div>"; var infowindow = new BMap.InfoWindow(content); marker.addEventListener("click", function() { this.openInfoWindow(infowindow); }); //將標註新增到地圖這個一定要在迴圈裡面 } }); //alert(zhandianpoint.length) //上車點下車點一定要在迴圈外邊 //設定第一個點的座標(上車點)圖片 var marker1 = new BMap.Marker(zhandianpoint[0], { icon: icona[0] }); //設定最後一個點的座標(下車點)圖片 var marker2 = new BMap.Marker(zhandianpoint[zhandianpoint.length - 1], { icon: icona[1] }); // var marker3 = new BMap.Marker(zhandianpoint[zhandianpoint.length - 2], { // icon: icona[0] // }); //map.removeOverlay(marker3)； map.addOverlay(marker1); //將標註新增到地圖 map.addOverlay(marker2); //將標註新增到地圖 //map.addOverlay(marker3); // marker3.addEventListener("click", function() { // //this.openInfoWindow(infowindow1); // }); //map.removeOverlay(marker3); var content1 = "<div style='overflow:hidden; width:300px;'>"; //設定標註資訊這個也要在迴圈裡面這是寫的上車下車 content1 = content1 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[0].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[0].name + "</span></p>"; content1 = content1 + "<div style=' width:50% ; float: left;overflow:hidden;'>"; content1 = content1 + "<img src='" + d.data[0].image1 + "'style='width:140px;height:105px;'/>"; content1 = content1 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[0].title1 + "</span>"; content1 = content1 + "</div>"; content1 = content1 + "<div style=' width:50% ; float:right;overflow:hidden;'>"; content1 = content1 + "<img src='" + d.data[0].image2 + "'style='width:140px;height:105px;'/>"; content1 = content1 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[0].title2 + "</span>"; content1 = content1 + "</div>"; content1 += "</div>"; var infowindow1 = new BMap.InfoWindow(content1); marker1.addEventListener("click", function() { this.openInfoWindow(infowindow1); }); if(d.data[d.data.length - 1].image1==""){ var content2 = "<div style='overflow:hidden;width:300px;'>"; //設定標註資訊這個也要在迴圈裡面這是寫的上車下車 content2 = content2 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].name + "</span></p>"; content2 = content2 + "<div style=' width:48% ; float: left;overflow:hidden;'>"; content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title1 + "</span>"; content2 = content2 + "</div>"; content2 = content2 + "<div style=' width:48% ; float:right;overflow:hidden;'>"; content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title2 + "</span>"; content2 = content2 + "</div>"; content2 += "</div>"; }else{ var content2 = "<div style='overflow:hidden;width:300px;'>"; //設定標註資訊這個也要在迴圈裡面這是寫的上車下車 content2 = content2 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].name + "</span></p>"; content2 = content2 + "<div style=' width:48% ; float: left;overflow:hidden;'>"; content2 = content2 + "<img src='" + d.data[d.data.length - 1].image1 + "'style='width:140px;height:105px;'/>"; content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title1 + "</span>"; content2 = content2 + "</div>"; content2 = content2 + "<div style=' width:48% ; float:right;overflow:hidden;'>"; content2 = content2 + "<img src='" + d.data[d.data.length - 1].image2 + "'style='width:140px;height:105px;'/>"; content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title2 + "</span>"; content2 = content2 + "</div>"; content2 += "</div>"; } var infowindow2 = new BMap.InfoWindow(content2); marker2.addEventListener("click", function() { this.openInfoWindow(infowindow2); }); // var p1 = zhandianpoint[0];//上車點 // var p2 = zhandianpoint[zhandianpoint.length - 1];//下車點 // var myP3 = zhandianpoint[1]; //途徑 // var myP4 = zhandianpoint[2]; //途徑 // var myP5 = zhandianpoint[3]; //途徑 var driving = new BMap.DrivingRoute(map); //建立駕車例項 var shugroup = Number((zhandianpoint.length) - 1) //alert(shugroup) for(var i = 0; i < shugroup; i++) { driving.search(zhandianpoint[i], zhandianpoint[i + 1]); //waypoints表示途經點 } // driving.search(p1, myP3); //第一個駕車搜尋 // driving.search(myP3, myP4); //第一個駕車搜尋 // driving.search(myP4, myP5); //第一個駕車搜尋 // driving.search(myP5, p2); //第一個駕車搜尋 driving.setSearchCompleteCallback(function() { var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車例項，獲得一系列點的陣列 var polyline = new BMap.Polyline(pts, { strokeColor: "green", //顏色 strokeWeight: 4, //粗細 strokeOpacity: 0.6 //不透明度 }) map.addOverlay(polyline); map.setViewport(zhandianpoint); //map.setViewport(allPoints); }); }); });

百度地圖api 自定義駕車線路規劃車輛實時定位

百度地圖api 自定義駕車線路規劃車輛實時定位

百度地圖API 自定義標註圖標

百度地圖API 自定義座標點及圖片

百度地圖API 自定義標註圖示

百度地圖API自定義覆蓋物與新增點選事件

網頁嵌入百度地圖和使用百度地圖api自定義地圖的詳細步驟

百度地圖API自定義座標marker點利用覆蓋物框選後獲取marker點資訊

百度地圖--獲取自定義區域JSON資料（上）

百度地圖--獲取自定義區域JSON資料（下）

Android百度地圖開發-自定義地圖的使用和坑

百度地圖新增自定義Marker+顯示覆蓋層次優先順序

百度地圖canvas自定義軌跡

百度地圖－自定義搜尋、自定義marker、地圖選址實用例項

Android 百度地圖新增自定義marker(覆蓋物)不顯示圖片的解決方法

百度地圖API 少量點和海量點自定義新增資訊

百度地圖API一：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

百度地圖API二：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

百度地圖API詳解之駕車導航

HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地(轉)

百度地圖api入門介紹（js篇）

百度地圖api 自定義駕車線路規劃 車輛實時定位

相關推薦

百度地圖api 自定義駕車線路規劃車輛實時定位