使用騰訊位置服務實現類滴滴汽車沿軌跡行駛功能

2022-09-14 22:36:29 字數 1981 閱讀 6089

最近公司有個地圖功能開發,根據車輛的行駛的經緯度,來畫出車輛的移動軌跡,並模擬車輛在該線路的行駛過程。

效果圖大致是這樣的。

webserveapi預設勾選就可以,在未上線之前,我們可以先不填網域名稱白名單。

只需要在html的頁面裡引入即可

乙個完成的例子

把上面這段**儲存到html檔案中,用瀏覽器開啟,就可以看到乙個地圖,如下:

我們要想讓車在地圖上跑起來,首先要畫出一條線。

有了地圖之後,我們要在地圖上劃線的話需要用到這個multipolyline這個類,折線。折線一般用於運動軌跡顯示、路線規劃顯示 等場景中。

這個類是以圖層的方式對折線進行單條或批量繪製,以及刪改等操作。你可以在地圖上建立,修改,刪除。

var path = [

new tmap.latlng(39.98481500648338, 116.30571126937866),

new tmap.latlng(39.982266575222155, 116.30596876144409),

new tmap.latlng(39.982348784165886, 116.3111400604248),

new tmap.latlng(39.978813710266024, 116.3111400604248),

new tmap.latlng(39.978813710266024, 116.31699800491333)

];var polylinelayer = new tmap.multipolyline(],

});

**效果圖

要畫線,必須要先有點,而點在地圖上表現為乙個經緯度,即這樣的new tmap.latlng(39.98481500648338, 116.30571126937866),有了一組點之後我們,就能對點進行連線,最後形成乙個折線。

當然我們也可以對先進行修改,改變線的顏色,寬度,邊線寬度, 邊線顏色,線端頭方式

var polylinelayer = new tmap.multipolyline()

},geometries: ,

});

該類的相關文件解釋

var marker = new tmap.multimarker(,

'faceto': 'map',

'rotate': 180,

'src': '',

}),"start": new tmap.markerstyle(,

"src": ''

}),"end": new tmap.markerstyle(,

"src": ''

})},

geometries: [, , ]

});

在styles中定義mark的樣式,一共有三種,車輛開始時,車輛行進時,車輛結束時。

在geometries中定義樣式在那個地方使用。

做完上面一步,車輛已經出現在了軌跡上的起點,但還不會自己走,

如圖

marker.movealong(

}, )

path是marker行走的路徑,speed是速度,autorotation表示是否在行進途中自動將旋轉

完整的原始碼是這樣的

最終的效果

wepy小程式 騰訊位置服務的路線規劃問題

踩坑 踩坑 踩坑 踩坑 qqmapwx 一定要小寫 import qqmapwx from libs qqmap wx jssdk.min.js 獲取位置型別要是gcj02 格式 getlocation template部分 預計 公尺 分鐘 import qqmapwx from libs qqm...

使用終端服務 實現網路遠端連線

什麼是終端服務?通俗地講,終端服務其實就是通過乙個 客戶端 軟體,對windows桌面進行遠端的訪問的服務。終端服務把程式的使用者介面傳輸到客戶端,然後客戶端會返回鍵盤和滑鼠單擊動作,以便由伺服器處理。每個使用者登入後只能看到其個人會話,該會話由伺服器的作業系統透明地進行管理,而且獨立於任何其他客戶...

Linux使用NFS服務實現遠端共享

首先是目錄,然後星號表示任何ip都能訪問 rw 讀寫,如果想要唯讀,可設為 o sync 資料同步寫入硬碟 no root squash 當遠端訪問使用root使用者時,不對映成,如果想用對映,可設為 root squash no subtree check 這個表示不確認父目錄的許可權,上面沒設定...