GoogleMap增加标记和路线轨迹的方法
程序员文章站
2022-03-23 13:44:39
声明：本文基于JavaScript环境编写。 前言 按照目前的项目需求，我们需要在谷歌地图上标记出当前仓库的位置、司机补货的行车路径、司机当前班次需要补货的机器的位置，同时根据补货状态的不同标记成不同状态的图标。 分析完需求，总结一下就是我们需要在谷歌地图上显示众多标记、轨迹画线、不同的标记显示不同 ......
声明：本文基于javascript环境编写。
前言
按照目前的项目需求，我们需要在谷歌地图上标记出当前仓库的位置、司机补货的行车路径、司机当前班次需要补货的机器的位置，同时根据补货状态的不同标记成不同状态的图标。
分析完需求，总结一下就是我们需要在谷歌地图上显示众多标记、轨迹画线、不同的标记显示不同的图标，于是前往google map查看api，因为我们的需求重点是在pc浏览器上实现，所以我们只关注了基于javascript的api，本文也基于此展开叙述。
目标
从本文中我将大概总结以下几点内容：
- 在web项目中引入google map。
- 在地图上增加位置标记。
- 在地图上增加自定义图标标记。
- 在地图上根据众多gps点绘制路线，并标记不同颜色。
- 在地图上清除已经绘制好的标记。
我截取了一张实际的效果图，其中图标有蓝色的仓库、绿色状态表示已完成的机器，未完成的机器应该是灰色的，但是这张图中没有这种状态的数据。
功能实现
前期准备
1、准备好sdk引入
按照googlemap api中的指引，你需要引入以下js文件：
1 <!-- 2 * load the api from the specified url 3 * the async attribute allows the browser to render the page while the api loads 4 * the key parameter will contain your own api key (which is not needed for this tutorial) 5 * the callback parameter executes the initmap() function 6 --> 7 <script async defer src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initmap"></script>
其中，your_api_key是你在google云平台操作面板为googlemap api使用所申请的秘钥，你可以通过以下指南找到答案。
申请googlemap api key：https://developers.google.com/maps/documentation/javascript/get-api-key
同时，按照上面引用的js文件中指明的回调方法，你需要写出函数体，并在此中初始化地图和数据：
1 <script>
2 // initialize and add the map
3 function initmap() {
4 ....
5 }
6 </script>
创建地图
1、创建一个div用来放置地图，可以给地图设置一个id属性，以便生成地图时使用
<div id="map" class="ibox-content" style="padding:15px 0 20px 0"></div>
2、创建google地图对象，设置中心点和视图层级等信息
1 /* 初始化地图对象 */
2 function initmap() {
3 var center = {lat: 13.751898, lng: 100.500565};
4 var map = new google.maps.map(document.getelementbyid('map'), {
5 center: center, // 地图所展现视图的中心点
6 zoom: 10,
7 maptypeid: google.maps.maptypeid.roadmap,
8 maptypecontrol: false,
9 pancontrol: false,
10 zoomcontrol: true,
11 streetviewcontrol: false
12 });
13 }
3、添加仓库位置标记
1 /* 获取仓库位置数据，并在地图上显示仓库图标 */
2 function showwarehouseposition(map) {
3 var warehouseid = $("#warehouse").val();
4 $.ajax({
5 url: 'getwarehousegpsdata',
6 type: 'get',
7 datatype: 'json',
8 data: {warehouseid: warehouseid},
9 success: function (data) {
10 if(data.code == 200) {
11 if(data.result != undefined) {
12 // 从后台响应回来的是一个包含lat和lng属性的对象
13 var warehousegpsposition = {lat: number(data.result.lat), lng: number(data.result.lng)};
14 // 在地图上生成仓库的标记，仓库图标自定义
15 var marker = new google.maps.marker({
16 position: warehousegpsposition,
17 icon: "./googlemap/images/warehouse.png",
18 map: map
19 });
20 }
21 }else {
22 alert("failed.");
23 }
24 },
25 error: function () {
26 alert("system error.");
27 }
28 })
29 }
4、添加机器的位置，为不同状态标注不同图标
1 // 用于记录机器标注位置，以便于后续清除标记
2 var devicemarkerarray = [];
3
4 /* 查询机器位置数据 */
5 function showmachineposition(map) {
6 var buzid = $("#business").val();
7 $.ajax({
8 url: 'getmachinegpslist',
9 type: 'get',
10 datatype: 'json',
11 data: {buzid: buzid},
12 success: function (data) {
13 if(data.code == 200 && data.result != undefined) {
14 var finishedmachinegpslist = data.result.finishedmachinegpslist;
15 var unfinishedmachinegpslist = data.result.unfinishedmachinegpslist;
16 drawmachineposition(map, finishedmachinegpslist, unfinishedmachinegpslist);
17 }else {
18 alert("failed.");
19 }
20 },
21 error: function () {
22 alert("system error.");
23 }
24 })
25 }
26
27 /* 绘制机器位置 */
28 function drawmachineposition(map, finishedmachinegpslist, unfinishedmachinegpslist) {
29
30 // 先清除地图上之前标记过的机器图标
31 // 可做可不做，业务需要的话可以清除
32 clearoverlays();
33
34 // 已完成机器位置
35 if(finishedmachinegpslist != null && finishedmachinegpslist != undefined) {
36 $.each(finishedmachinegpslist, function (index, item) {
37 var marker = new google.maps.marker({
38 position: item,
39 icon: "./googlemap/images/fulfilled.png",
40 map: map
41 });
42 devicemarkerarray.push(marker);
43 google.maps.event.addlistener(marker,"click",function(){});
44 });
45 }
46
47 // 未完成机器位置
48 if(unfinishedmachinegpslist != null && unfinishedmachinegpslist != undefined) {
49 $.each(unfinishedmachinegpslist, function (index, item) {
50 var marker = new google.maps.marker({
51 position: item,
52 icon: "./googlemap/images/unfulfill.png",
53 map: map
54 });
55 devicemarkerarray.push(marker);
56 google.maps.event.addlistener(marker,"click",function(){});
57 });
58 }
59
60 }
61
62 /* 清除之前的标记 */
63 function clearoverlays() {
64 if(devicemarkerarray != undefined && devicemarkerarray != null && devicemarkerarray.length > 0) {
65 for (var i = 0; i < devicemarkerarray.length; i++ ) {
66 devicemarkerarray[i].setmap(null);
67 }
68 devicemarkerarray.length = 0;
69 }
70 }
5、生成司机行车路线
通过司机手机手持app实时上报上来的gps位置信息，我们将之在地图上逐个标记并串联成线，形成轨迹图效果。
1 /* 获取司机行车记录下的gps数据串，并在地图上连线形成路径 */
2 function showdriverroute(map) {
3 var buzid = $("#business").val();
4 $.ajax({
5 url: 'getdrivergpslist',
6 type: 'get',
7 datatype: 'json',
8 data: {buzid: buzid},
9 success: function (data) {
10 if(data.code == 200 && data.result != undefined) {
11 drawdriverroute(map, data.result.drivergpsdatalist,
12 data.result.routecolor, data.result.carlocation);
13 }else {
14 alert("failed.");
15 }
16 },
17 error: function () {
18 alert("system error.");
19 }
20 })
21 }
22
23 /* 绘制行车路线 */
24 function drawdriverroute(map, drivergpsdatalist, routecolor, carlocation) {
25 // 绘制行车路线
26 // drivergpsdatalist是一个后台list对象，数组对象中包含的元素都是包含lat和lng属性的对象
27 var driverpath = new google.maps.polyline({
28 path: drivergpsdatalist,
29 geodesic: true,
30 strokecolor: routecolor, // #ff0000
31 strokeopacity: 1.0,
32 strokeweight: 2
33 });
34 driverpath.setmap(map);
35
36 // 抓取最后的一个点，绘制一个车的图标，表示车在这里
37 // carlocation是一个包含lat和lng属性的后台对象
38 var latlng = {lat: number(carlocation.lat), lng: number(carlocation.lng)};
39 var carmarker = new google.maps.marker({
40 position: latlng,
41 icon: "./googlemap/images/vehicle.png",
42 map: map
43 });
44 }
参考资料
1、https://developers.google.com/maps/documentation/javascript/tutorial