2. 程式人生 > >基於百度地圖做動態路線打點

基於百度地圖做動態路線打點

阿新 • • 發佈：2019-02-16
// 百度地圖API功能 // 百度地圖獲取容器 var mp = new BMap.Map("allmap"); // 百度地圖定義中心點 mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15); // 百度地圖滾輪可縮放 mp.enableScrollWheelZoom(); // 複雜的自定義覆蓋物(建構函式) function ComplexCustomOverlay(point, text, mouseoverText,index,linetext,linecolor){ this
._point = point; // 經緯度 this._text = text; // 顯示文字 this._overText = mouseoverText; // 滑鼠移入後顯示的文字 this._index = index // 表示第幾個點 this._linetext = linetext; this._linecolor = linecolor; } ComplexCustomOverlay.prototype = new BMap.Overlay();// 繼承百度覆蓋物 ComplexCustomOverlay.prototype.initialize = function
(map){ this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = this._linecolor; div.style.color = "white"; div.style.height = "50px"
; div.style.width = "50px"; div.style.borderRadius = '50%'; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px"; div.style.opacity = 1; div.className = 'circleDiv'+this._linetext+this._index +' animated pulse infinite' div.onmouseover = function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; } div.onmouseout = function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; } mp.getPanes().labelPane.appendChild(div); return div; } ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x + "px"; this._div.style.top = pixel.y - 30 + "px"; } var date = [{'linedata': [39.92501, 39.926101 ,39.927101, 39.928101, 39.929101, 39.930101, 39.931101, 39.932101, 39.933101, 39.934101, 39.935101],'linecolor':'#000','linetext':'line1'},{'linedata': [39.91901, 39.918101 ,39.917101, 39.916101, 39.915101, 39.914101, 39.913101, 39.122101, 39.911101, 39.910101, 39.909101],'linecolor':'blue','linetext':'line2'} ]; date.forEach(function(value){ adddot(value) }) function adddot(data){ // 一條線路的打點 for (var i in data.linedata) { // 閉包 (function(i,data) { setTimeout(function() { // 每隔3s建立一個點 var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845, data.linedata[i]), "",'mousetext',i,data.linetext,data.linecolor); mp.addOverlay(myCompOverlay); // 打第二個開始 // console.log(i); (function(j,linetext){ // 第一個打點不做任何操作 if(i >= 1){ // 遍歷當前點前面的點 for (var j=1;j<=i;j++) { var currentdom = document.getElementsByClassName('circleDiv'+linetext+(i-j)) console.log(i-j) // 當前面的點因為透明度小於0的時候節點被刪除，所以當點存在時每個點減去0.2的透明度 if(currentdom[0]){ currentdom[0].style.opacity = currentdom[0].style.opacity - 0.2 // 依次減淡 當透明度小於0是刪除這個點 if(currentdom[0].style.opacity <= 0){ console.log('move') currentdom[0].parentNode.removeChild(currentdom[0]) } } } } // 當打到最後一個點的時候 if(i ==data.length-1){ } })(i,data.linetext) }, i*(10/data.linedata.length)*3000); })(i,data) } }

相關推薦

基於百度地圖做動態路線打點

// 百度地圖API功能 // 百度地圖獲取容器 var mp = new BMap.Map("allmap"); // 百度地圖定義中心點 mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15); //

基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（3）-前端實現

方便 復制 類型 復制代碼 自動跳轉 rar 窗口 stack delete 轉載自：http://www.cnblogs.com/Auyuer/p/8086975.html MoonLight可視化訂單需求區域分析系統實現功能： 　　在現實生活中，計算機和互聯網迅速發展，

Python調用百度地圖API（路線規劃、POI檢索）——第一部分

api mil 申請 eap pos ice poi檢索 pytho 例如 項目的目的是為了查詢某個點附近某些POI的最近距離，例如查詢天安門到附近最近的商場的距離（時間） 1.百度地圖API 程序中用到百度地圖的兩個API，分別是 （1）路線規劃服務（又名Directio

Android開發-基於百度地圖API開發仿滴滴出行APP介面的實現

前 言 近年來，由於移動網際網路快速的發展以及基於移動裝置的APP的普及，移動網際網路改變了人們的生活方式。從線上的電子支付到線下的出行，移動網際網路是當今社會人們生活不可或缺的一部分，而線下出行的網約車的出現極大便利了人們的出行，雖然它飽受了很大的爭議，但不可否認的是網約車的出現是

Android學習筆記之百度地圖（駕車路線搜尋及RouteOverlay步行路線搜尋及RouteOverlay）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

基於百度地圖API刪除指定的覆蓋物

引用百度地圖API過程中，想刪除指定的覆蓋物，有很多很多的坑。什麼clearOverlay()方法，直接給我所有覆蓋物都給乾沒了。還有網上介紹的removeOverlay(物件)，這種又介紹不清楚，然後自己經過實踐，最終解決了。 直接上圖、上程式碼。 查詢所有地圖的覆蓋物程式碼： /

基於百度地圖API的WinForm地圖

      大概去年的這個時候，我用VB寫了一個百度地圖的Demo，使用了webBrowser載入本地網頁的方式，只是限於當時的技術，好多功能都沒實現，昨天，我重新對這個程式進行了編寫，這一次我使用的是C#。在正式開始之前，先來解決幾個問題。       一、地圖    

百度地圖做電子圍欄總結

需求：在地圖上畫出圍欄，設定圍欄資訊後儲存，生成圍欄列表。全選時，地圖視野可看到全部的圍欄區域，單獨勾選會調整地圖視野到當前勾選的圍欄。圍欄區域的中心點要顯示圍欄名稱。 主要的難點（對於我而言）不在於畫，而在於設定地圖視野和圍欄區域的中心點顯示圍欄名稱，其

百度地圖中動態生成網格

目的：根據距離生成網格，比如500米一個網格 技術：js 百度地圖 程式碼如此下： <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-

Android定位&地圖&導航——基於百度地圖移動獲取位置和自動定位

public class MainActivity extends Activity { public MyApplication app; static MapView mMapView = null; public MKMapViewListener mMapListen

Android定位&地圖&導航——基於百度地圖實現的定位功能

public class MyApplication extends Application{ public LocationClient mLocationClient = null; public GeofenceClient mGeofenceClient; publi

Android定位&地圖&導航——基於百度地圖，實現自定義圖示繪製並點選時彈出泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

基於百度地圖SDK整合的一些功能

最近開發的專案用到了地圖，並在地圖上顯示某些座標位置的標記圖示，點選圖示來顯示此座標處的一些資訊，之後我從百度地圖卡房平臺下載了百度地圖的SDK和Demo,並結合API總結了一下幾點內容，實現了下面的幾個功能： （1）最基本功能，定位到當前位置 並獲

一個基於百度地圖的桌面軟體（附工程原始碼）

光陰似箭，日月如梭，恍然間，2013就這樣平平淡淡的過去了。想想工資卡上的餘額，心中不免浮起蛋蛋的憂桑。如果再回到2013。。。。。罷了，青春就是如此，每個人都肆無忌憚的揮霍著，在年華正當之時。或許只有當歲月的烙印狠狠落下的那一刻，我們才會想起那再也回不去的美好年華，那落英

如何在asp.net中使用百度地圖並動態獲取到資料庫中的座標點進行標註

前段時間忙於公司的一個專案，專案中一個功能就是動態獲取資料庫的經緯度資訊並在百度地圖上進行標註，剛開始在網上查了很多資料還是沒能解決，也發現很多網友都遇到過這樣的問題，最後查閱資料過程中看到別人的文章，恍然大悟，然後重新程式碼順利解決。下面將本人的解決方法做一下介紹，供各位

iOS基於百度地圖的開發(1)——使用者當前位置

首先需要設定mapView的屬性： self.mapView = [[[BMKMapView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)] aut

2016基於百度地圖定位

現在百度改版後有點不習慣，沒辦法，只有自己又去看了一下，比以前的簡單方便多，有時間我會把導航等給做出來，當然了這個程式碼只是對於初學者來的，因為我自己也是初學者，你自己也可以在百度API上去看，試著寫一遍，我這個主要的目的還是因為最近需要我才弄了一個定位的東西提

基於百度地圖開發網易班車地圖導航展示

col uri type open one 記錄 length () 代碼 來到網易已經不知不覺一兩個月了，最近把原來租的房子出租後，打算重新租一套房子。找到一個好房子不容易，首先考慮交通問題，上下班時間不能耗費太長，網易提供了遍布全城的班車系統，不過說實話，貌似只有文字說

百度地圖 駕車路線編輯粗淺實例

edr call sset driving route drag getpath pre fun var centerBPoints=[BPoint1,BPoint2,BPoint3,...]; var driving = ne

【做題】計蒜客11217 百度地圖的實時路況——分治

std 單個 sin 其中 %d min urn 百度 得到 又是一道明明簡單我卻不會的題。 切入點當然是O(n^4)的暴力。顯然這其中有大量的重復計算。 一開始的想法是從前往後，從後往前各跑一遍floyd。這樣做的關鍵問題在於如何合並兩個floyd的結果。然而我只想出了O