Google Map 谷歌地图轨迹标注

本文主要简单记录轨迹标注

开场白

项目涉及国外使用，需要使用 Google Map 进行轨迹标注

不得不吐槽谷歌地图文档的杂乱，有点难找，不过轨迹标注官方就自带简单示例 Simple Polylines ：

运行效果

划线使用的 API 是 https://developers.google.cn/maps/documentation/javascript/reference/polygon#Polyline

但是啊

这个有点丑，可是呢，长的丑，想玩花，花如（不是如花哦 ⊙ω⊙）滴滴这类的：

分析分析有哪些需要实现：

• 起点、终点
• 划线（带箭头）

好，下面逐个实现

使用 Marker 实现起点、终点

官方简单 Marker 示例 Simple Markers：

运行效果

这个图标差了点，来改造改造，参考 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  // 线条粗细
})

完整代码

运行效果

实际项目效果如下，可以自行加上 InfoWindow 等：

总结

轨迹里面的箭头其实有点小问题，就是地图缩小的时候，显示毕竟密集，不过问题不大

只是简单使用，其实网上还有些骚操作，比如轨迹动画什么的

毕竟坑的无疑就是谷歌地图 Key 的申请了，现在还要信用卡绑定，真是麻烦

图标什么的可以自己画，这样效果会更好，我就是网上随便找的改改而已

人老了，开始要备份了，诶

再见了，2019

—— 2019/12/31 By Vinci， Mostly Sunny.