Google Map 谷歌地图轨迹标注
2019-12-31 本文已影响0人
於風聽語
本文主要简单记录轨迹标注
开场白
项目涉及国外使用，需要使用 Google Map 进行轨迹标注
不得不吐槽谷歌地图文档的杂乱，有点难找，不过轨迹标注官方就自带简单示例 Simple Polylines ：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
运行效果
划线使用的 API 是 https://developers.google.cn/maps/documentation/javascript/reference/polygon#Polyline
但是啊
这个有点丑，可是呢，长的丑，想玩花，花如（不是如花哦 ⊙ω⊙）滴滴这类的：
分析分析有哪些需要实现：
- 起点、终点
- 划线（带箭头）
好，下面逐个实现
使用 Marker 实现起点、终点
官方简单 Marker 示例 Simple Markers：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
运行效果
这个图标差了点，来改造改造，参考 Marker 文档，可以看到详细 google.maps.MarkerOptions
可以看到一项 icon：
google.maps.MarkerOptions
也就是 icon 可以指定 Marker 图标，那么 Icon 又是啥，点开 链接 可以看到：
google.maps.Icon
好的，简单，先搞个图片：
起点图标
那么我们构造 Marker 如下：
const marker = new google.maps.Marker({
position: {lat: -25.363, lng: 131.044},
title: '起点',
icon: {
url: '/spotlight-start.png', // icon 图片地址
scaledSize: { // 缩放至什么尺寸，单位 px，注意宽高必须是 Number
width: 45,
height: 45
}
}
})
图片我网上随便找的，你们可以找设计画一画
运行效果
然后终点什么的也就类似
接下来画线
Polyline 画轨迹线
示例就是开头那个，这里直接看 google.maps.PolylineOptions：
google.maps.PolylineOptions
可以看到可以利用 strokeColor、strokeOpacity、strokeWeight 控制画线的 颜色、透明度、粗细
还可以看到 icons 选项，用来渲染 icons 到线上，来看看 google.maps.IconSequence：
google.maps.IconSequence
具体的就不展开了，需要用到 icon，这个 icon 是个 Symbol:
Symbol
东西有点多，直接套代码吧：
// 箭头符号
const lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
fillColor: '#FFF',
strokeColor: '#FFF',
scale: 0.9,
strokeWeight: 3,
fillOpacity: 0.8
}
new google.maps.Polyline({
path: [], // 坐标数组，这个自己填吧
strokeColor: "#F7523C", // 线条颜色
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '5%'
}],
strokeOpacity: .8, // 线条透明度
strokeWeight: 10 // 线条粗细
})
完整代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
// 箭头符号
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
fillColor: '#FFF',
strokeColor: '#FFF',
scale: 0.9,
strokeWeight: 3,
fillOpacity: 0.8
};
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#F7523C", // 线条颜色
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '5%'
}],
strokeOpacity: .8, // 线条透明度
strokeWeight: 10 // 线条粗细
});
var startMarker = new google.maps.Marker({
position: flightPlanCoordinates[0],
title: '起点',
icon: {
url: '/spotlight-start.png', // icon 图片地址
scaledSize: { // 缩放至什么尺寸，单位 px，注意宽高必须是 Number
width: 45,
height: 45
}
}
});
var endMarker = new google.maps.Marker({
position: flightPlanCoordinates[flightPlanCoordinates.length - 1],
title: '终点',
icon: {
url: '/spotlight-end.png', // icon 图片地址
scaledSize: { // 缩放至什么尺寸，单位 px，注意宽高必须是 Number
width: 45,
height: 45
}
}
});
flightPath.setMap(map);
startMarker.setMap(map);
endMarker.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
运行效果
实际项目效果如下，可以自行加上 InfoWindow 等：
总结
轨迹里面的箭头其实有点小问题，就是地图缩小的时候，显示毕竟密集，不过问题不大
只是简单使用，其实网上还有些骚操作，比如轨迹动画什么的
毕竟坑的无疑就是谷歌地图 Key 的申请了，现在还要信用卡绑定，真是麻烦
图标什么的可以自己画，这样效果会更好，我就是网上随便找的改改而已
人老了，开始要备份了，诶
再见了，2019
—— 2019/12/31 By Vinci， Mostly Sunny.
