Google Map 谷歌地圖軌跡標注

本文主要簡單記錄軌跡標注

開場白

項目涉及國外使用，需要使用 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

但是啊

這個有點丑，可是呢，長的丑，想玩花，花如（不是如花哦 ⊙ω⊙）滴滴這類的：

分析分析有哪些需要實現(xiàn)：

  • 起點、終點
  • 劃線（帶箭頭）

好，下面逐個實現(xiàn)

使用 Marker 實現(xiàn)起點、終點

官方簡單 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

好的，簡單，先搞個圖片：

起點圖標

那么我們構(gòu)造 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
        }
    }
})

圖片我網(wǎng)上隨便找的，你們可以找設(shè)計畫一畫

運行效果

然后終點什么的也就類似

接下來畫線

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: [], // 坐標數(shù)組，這個自己填吧
    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 等：

總結(jié)

軌跡里面的箭頭其實有點小問題，就是地圖縮小的時候，顯示畢竟密集，不過問題不大

只是簡單使用，其實網(wǎng)上還有些騷操作，比如軌跡動畫什么的

畢竟坑的無疑就是谷歌地圖 Key 的申請了，現(xiàn)在還要信用卡綁定，真是麻煩

圖標什么的可以自己畫，這樣效果會更好，我就是網(wǎng)上隨便找的改改而已

人老了，開始要備份了，誒

再見了，2019

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容