前言
最近公司有個地圖功能開發(fā)糠爬，根據(jù)車輛的行駛的經(jīng)緯度拙寡，來畫出車輛的移動軌跡庐橙，并模擬車輛在該線路的行駛過程。
效果圖大致是這樣的怯伊。
image.png
簡易入門
首先進入騰訊位置服務(wù)頁面然后進行注冊賬號琳轿，注冊完成后需要申請AppKey，我們將在自己的應(yīng)用中配置這個Key來使用SDK中的服務(wù)耿芹。
企業(yè)微信20210521-111830@2x.png
webserveapi默認勾選就可以崭篡，在未上線之前，我們可以先不填域名白名單。
只需要在html的頁面里引入即可
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你剛申請的key"></script>
一個完成的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>創(chuàng)建地圖</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地圖
var map = new TMap.Map("container", {
rotation: 20,//設(shè)置地圖旋轉(zhuǎn)角度
pitch: 30, //設(shè)置俯仰角度（0~45）
zoom: 12,//設(shè)置地圖縮放級別
center: center//設(shè)置地圖中心點坐標
});
}
</script>
</body>
</html>
把上面這段代碼保存到html文件中，用瀏覽器打開吩愧，就可以看到一個地圖,如下：
image.png
實現(xiàn)需求：汽車行駛在地圖上
我們要想讓車在地圖上跑起來，首先要畫出一條線。
由點連線
有了地圖之后疗涉，我們要在地圖上劃線的話需要用到這個MultiPolyline這個類拿霉，折線。折線一般用于運動軌跡顯示咱扣、路線規(guī)劃顯示 等場景中绽淘。
這個類是以圖層的方式對折線進行單條或批量繪制，以及刪改等操作闹伪。你可以在地圖上創(chuàng)建沪铭，修改，刪除偏瓤。
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({
map, // 繪制到目標地圖
// 折線樣式定義
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
代碼效果圖
image.png
要畫線杀怠，必須要先有點，而點在地圖上表現(xiàn)為一個經(jīng)緯度厅克，即這樣的new TMap.LatLng(39.98481500648338, 116.30571126937866),有了一組點之后我們赔退，就能對點進行連線，最后形成一個折線。
當(dāng)然我們也可以對先進行修改硕旗，改變線的顏色窗骑，寬度，邊線寬度漆枚， 邊線顏色创译，線端頭方式
var polylineLayer = new TMap.MultiPolyline({
map, // 繪制到目標地圖
// 折線樣式定義
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //線填充色
'width': 3, //折線寬度
'borderWidth': 1, //邊線寬度
'borderColor': '#FFF', //邊線顏色
'lineCap': 'round' //線端頭方式
})
},
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
物沿線動
有了線之后，也就是行駛軌跡后墙基，我們需要在線的起始端添加一個汽車的標志软族，然后讓這個汽車沿著線走起來，
在騰訊地圖里要在地圖上添加一個標注碘橘，需要使用MultiMarker類互订，這個類可以讓你往地圖上的多個標注點，可自定義標注的圖標痘拆。
var marker = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 40,
'height': 40,
'anchor': {
x: 20,
y: 20,
},
'faceTo': 'map',
'rotate': 180,
'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
})
},
geometries: [{
id: 'car',
styleId: 'car-down',
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
}, {
"id": 'start',
"styleId": 'start',
"position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
}]
});
在styles中定義mark的樣式仰禽，一共有三種，車輛開始時纺蛆，車輛行進時吐葵，車輛結(jié)束時。
在geometries中定義樣式在那個地方使用桥氏。
做完上面一步温峭，車輛已經(jīng)出現(xiàn)在了軌跡上的起點，但還不會自己走字支，
如圖
image.png
在騰訊地圖中如果要讓一個地圖走凤藏，需要使用的
MultiMarker的moveAlong方法,具體用法
marker.moveAlong({
'car': {
path,
speed: 250
}
}, {
autoRotation: true
})
path是marker行走的路徑，speed是速度堕伪，autoRotation表示是否在行進途中自動將旋轉(zhuǎn)
最終效果及源碼
完整的源碼是這樣的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>marker軌跡回放-全局模式</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QSWBZ-AL2KU-4Q4VI-46ONV-26OOT-ISB5G"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地圖
var map = new TMap.Map("container", {
zoom: 15,
center: center
});
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({
map, // 繪制到目標地圖
// 折線樣式定義
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //線填充色
'width': 4, //折線寬度
'borderWidth': 2, //邊線寬度
'borderColor': '#FFF', //邊線顏色
'lineCap': 'round' //線端頭方式
})
},
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
var marker = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 40,
'height': 40,
'anchor': {
x: 20,
y: 20,
},
'faceTo': 'map',
'rotate': 180,
'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
})
},
geometries: [{
id: 'car',
styleId: 'car-down',
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
}, {
"id": 'start',
"styleId": 'start',
"position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
}]
});
marker.moveAlong({
'car': {
path,
speed: 250
}
}, {
autoRotation: true
})
</script>
</body>
</html>
最終的效果
寫在最后
騰訊位置服務(wù)提供了很多示例揖庄，如果做個需求沒有頭緒的話，可以先看看騰訊地圖的示例中心欠雌。
如果你是高手蹄梢，想做更多自定義擴展的功能，可以直接查看騰訊提供的API文檔富俄，里面包含了所有類的屬性禁炒，方法。
作者：拿我格子衫來
鏈接：https://fizzz.blog.csdn.net/article/details/111764120
來源：CSDN
著作權(quán)歸作者所有霍比。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)幕袱，非商業(yè)轉(zhuǎn)載請注明出處。
