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 = [[{lng: 120.6749144, lat: 24.1239138}, 
                {lng: 120.674952, lat: 24.1227485}, 
                {lng: 120.6737396, lat: 24.1227583}, 
                {lng: 120.673694, lat: 24.1190129}, 
                {lng: 120.6741098, lat: 24.1190153}, 
                {lng: 120.6741044, lat: 24.1183592}, 
                {lng: 120.6741393, lat: 24.1181242}, 
                {lng: 120.6741178, lat: 24.1178794}, 
                {lng: 120.6741098, lat: 24.1175734}, 
                {lng: 120.6741098, lat: 24.1173727}, 
                {lng: 120.6740507, lat: 24.1172821}, 
                {lng: 120.6743056, lat: 24.1166309}],   // 從大門至康堤
               [{lng: 120.6741607, lat: 24.1170642}, 
                {lng: 120.6744826, lat: 24.117265}, 
                {lng: 120.6747508, lat: 24.1173678}, 
                {lng: 120.6749198, lat: 24.1173923}, 
                {lng: 120.6752041, lat: 24.1174265}, 
                {lng: 120.6756037, lat: 24.1174486}, 
                {lng: 120.6761724, lat: 24.1174559}, 
                {lng: 120.676167, lat: 24.117544}, 
                {lng: 120.6755528, lat: 24.1177129}, 
                {lng: 120.6751317, lat: 24.117708}, 
                {lng: 120.6751451, lat: 24.1205013}, 
                {lng: 120.6758881, lat: 24.1205037}, 
                {lng: 120.6758881, lat: 24.1203398}, 
                {lng: 120.6766311, lat: 24.1203446}, 
                {lng: 120.6766471, lat: 24.1196714}, 
                {lng: 120.6775242, lat: 24.1197424}, 
                {lng: 120.6775229, lat: 24.119855}, 
                {lng: 120.677999, lat: 24.119855}, 
                {lng: 120.6780231, lat: 24.1238428}, 
                {lng: 120.675298, lat: 24.1238232}, 
                {lng: 120.6752899, lat: 24.1239113}, 
                {lng: 120.6750619, lat: 24.1239211}]    // 從康堤至大門   
              ];
   var sensor =[{lng: 120.6749466, lat: 24.1238452},
                {lng: 120.6748661, lat: 24.1226873},
                {lng: 120.6737799, lat: 24.1227167},
                {lng: 120.6737477, lat: 24.121434},
                {lng: 120.6734794, lat: 24.1194902},
                {lng: 120.6739836, lat: 24.1187974},
                {lng: 120.6739595, lat: 24.1174168},
                {lng: 120.6790423, lat: 24.1185502}
              ];
  
  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: 'green'
            },
            offset: '81%'
          },{
            icon: {
              path: 'M -1,1 0,0 1,1',
              strokeOpacity: 1,
              strokeWeight: 1.5,
              scale: 6,
              strokeColor: 'green'
            },
            offset: '88%'
          },{
            icon: {
              path: 'M -1,1 0,0 1,1',
              strokeOpacity: 1,
              strokeWeight: 1.5,
              scale: 6,
              strokeColor: 'green'
            },
            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: 'green'
            },
            repeat: '6px'
          }],
          map: map
        });
        
        marker[i] = new google.maps.Marker({
          map: map,
          icon: 'http://maps.google.com/mapfiles/kml/shapes/hiker.png', // 引用Google Maps Icons http://kml4earth.appspot.com/icons.html#shapes
          position: paths[i][paths[i].length-1]
        });
                
       }
       
    for ( ; i<paths.length+sensor.length ; i++)
       {        
        marker[i] = new google.maps.Marker({
          map: map,
          icon: 'http://maps.google.com/mapfiles/kml/pal4/icon30.png',  // 引用Google Maps Icons http://kml4earth.appspot.com/icons.html#shapes
          position: sensor[i-paths.length]
        });
                
       }
 }
​
  
  // 設計精神可參考 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