Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Symbols on polylines</title>
<!-- 程式主架構參考 https://googlemaps.github.io/js-samples/symbols/polyline-symbols.html -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
​
  var map, timer;
  var offset = 0;
  // 為了以迴圈處理多段折線(polyline)，將原程式的下列變數改成陣列變數
  var marker = [];
  var dotted = [];
  var paths = [[{lat: 24.123902, lng: 120.675002},
                {lat: 24.122699, lng: 120.675038},
                {lat: 24.122623, lng: 120.674998},
                {lat: 24.122602, lng: 120.674192}], // 08:20 行政大樓北側
               [{lat: 24.122603, lng: 120.674095},
                {lat: 24.122651, lng: 120.673665},
                {lat: 24.123141, lng: 120.673661},
                {lat: 24.123258, lng: 120.673625}], // 08:30 人文大樓東側 
               [{lat: 24.123252, lng: 120.673592},
                {lat: 24.123137, lng: 120.673569},
                {lat: 24.121491, lng: 120.673553},
                {lat: 24.121488, lng: 120.672945},
                {lat: 24.121987, lng: 120.672959}], // 08:35 綜合大樓北側
               [{lat: 24.121980, lng: 120.672939},
                {lat: 24.121380, lng: 120.672920},
                {lat: 24.121384, lng: 120.674988},
                {lat: 24.120225, lng: 120.674992},
                {lat: 24.120224, lng: 120.675102},
                {lat: 24.120691, lng: 120.675098}], // 08:40 農環大樓西側
               [{lat: 24.120769, lng: 120.675100},
                {lat: 24.121728, lng: 120.675093}], // 08:45 生科大樓西側
               [{lat: 24.121824, lng: 120.675089},
                {lat: 24.122612, lng: 120.675100},
                {lat: 24.122697, lng: 120.675066},
                {lat: 24.122748, lng: 120.675067},
                {lat: 24.122748, lng: 120.675847}], // 08:50 化材大樓第二停車場
               [{lat: 24.122749, lng: 120.675942},
                {lat: 24.122748, lng: 120.676692},
                {lat: 24.123376, lng: 120.676669}], // 09:10 學生餐廳
               [{lat: 24.123360, lng: 120.676717},
                {lat: 24.123020, lng: 120.676722},
                {lat: 24.123028, lng: 120.677282}], // 09:15 舊理工大樓北側
               [{lat: 24.123028, lng: 120.677371},
                {lat: 24.123022, lng: 120.677896},
                {lat: 24.123425, lng: 120.677908},
                {lat: 24.123432, lng: 120.678473}], // 09:20 國農大樓正門
               [{lat: 24.123389, lng: 120.678446},
                {lat: 24.123381, lng: 120.677957},
                {lat: 24.122074, lng: 120.677947}], // 09:25 食生大樓西側
               [{lat: 24.122005, lng: 120.677951},
                {lat: 24.120722, lng: 120.677939}], // 09:30 土木環工大樓西側
               [{lat: 24.120688, lng: 120.677939},
                {lat: 24.119601, lng: 120.677925}], // 09:35 育成中心東側
               [{lat: 24.119615, lng: 120.677896},
                {lat: 24.120293, lng: 120.677900},
                {lat: 24.120291, lng: 120.676741}], // 09:40 化學館西側
               [{lat: 24.120313, lng: 120.676722},
                {lat: 24.121488, lng: 120.676720},
                {lat: 24.121488, lng: 120.676677}], // 09:50 精密所北側
               [{lat: 24.121489, lng: 120.676608},
                {lat: 24.121498, lng: 120.675042},
                {lat: 24.119554, lng: 120.675043}], // 10:15 圖書館東側
               [{lat: 24.119505, lng: 120.675042},
                {lat: 24.119002, lng: 120.675060},
                {lat: 24.119001, lng: 120.675798}], // 10:20 體育館北側
               [{lat: 24.119002, lng: 120.675872},
                {lat: 24.118980, lng: 120.677936},
                {lat: 24.118397, lng: 120.677945}], // 10:25 獸醫系館北側 
               [{lat: 24.118419, lng: 120.677902},
                {lat: 24.118922, lng: 120.677897},
                {lat: 24.118940, lng: 120.674055}], // 10:30 田徑場東側路口
               [{lat: 24.118940, lng: 120.673997},
                {lat: 24.118933, lng: 120.673639},
                {lat: 24.119468, lng: 120.673626},
                {lat: 24.119536, lng: 120.673653},
                {lat: 24.120249, lng: 120.673651},
                {lat: 24.120251, lng: 120.673542}]  // 10:35 社管大樓南側
              ];
   
  function initialize() {
​
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 24.121446, lng: 120.675873},
        zoom: 17
    });
    
    for (var i=0 ; i<paths.length ; i++)
       {
        // 新增符號到折線 https://developers.google.com/maps/documentation/javascript/symbols?hl=zh-tw#add_to_polyline
        dotted[i] = new google.maps.Polyline({
          path: paths[i],
          geodesic: true,
          strokeOpacity: 0.0,
          icons: [{
            icon: {
              path: 'M -1,1 0,0 1,1',
              strokeOpacity: 1,
              strokeWeight: 1.5,
              scale: 6,
              strokeColor: 'purple'
            },
            offset: '81%'
          },{
            icon: {
              path: 'M -1,1 0,0 1,1',
              strokeOpacity: 1,
              strokeWeight: 1.5,
              scale: 6,
              strokeColor: 'purple'
            },
            offset: '88%'
          },{
            icon: {
              path: 'M -1,1 0,0 1,1',
              strokeOpacity: 1,
              strokeWeight: 1.5,
              scale: 6,
              strokeColor: 'purple'
            },
            offset: '95%'
          },{
            icon: {
              path: 'M -.5,-.5 .5,-.5, .5,.5 -.5,.5',   // SVG語法意義參見 https://www.w3.org/TR/SVG/paths.html#PathData
              fillOpacity: 1,
              fillColor: 'purple'
            },
            repeat: '6px'
          }],
          map: map
        });
        
        marker[i] = new google.maps.Marker({
          map: map,
          icon: 'http://maps.google.com/mapfiles/kml/shapes/truck.png', // 引用Google Maps Icons http://kml4earth.appspot.com/icons.html#shapes
          position: paths[i][paths[i].length-1]
        });
                
       }
  }
​
  
  // 設計精神可參考 Animating Symbols 範例 https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate?hl=zh-tw
  timer = setInterval(function() {
     animateDotted();
  }, 200);
​
​
  function animateDotted() {
    if (offset == 5) {
      offset = 0;
    } else {
      offset++;
    }
    for (var i=0 ; i<paths.length ; i++)
       {
        var icons = dotted[i].get('icons');
        icons[3].offset = offset + 'px';
        dotted[i].set('icons', icons);
       }
  }
  
</script>
</head>
<body onload="initialize()">
  <div id="map" style="width:100%;height:700px;"></div>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers