是否有可能使用SVG圖標

我試圖使用SVG圖標像這樣繪製在谷歌地圖的多色折線在谷歌地圖的精確折線：是否有可能使用SVG圖標

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(26, -48), 
 
     zoom: 6, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var color = ["#FF0000", "#FFFF00"]; 
 

 
    var Coordinates = [ 
 
    new google.maps.LatLng(29, -51), 
 
    new google.maps.LatLng(29, -50), 
 
    new google.maps.LatLng(26, -50), 
 
    new google.maps.LatLng(26, -51), 
 
    new google.maps.LatLng(29, -51)]; 
 

 
    for(var i = 0; i < Coordinates.length-1; i ++) 
 
    { 
 
     for(var j = 0; j < color.length; j ++) 
 
     { 
 
     \t var polyline = { 
 
       strokeWeight : 3, 
 
       path: [Coordinates[i], Coordinates[i+1]], 
 
       strokeOpacity: 0, 
 
       icons: [{ 
 
        icon: { 
 
         path: 'M 0,' + ((j)*10) + ' 0,' + ((j+1)*10), 
 
         strokeOpacity: 1, 
 
         strokeWeight: 3, 
 
         scale: 1 
 
        }, 
 
        repeat: '20px' 
 
       }], 
 
       strokeColor: color[j], 
 
       map: map 
 
      } 
 
      
 
      new google.maps.Polyline(polyline); 
 
      console.log(polyline); 
 
      
 
     } 
 
     
 
    } 
 
    
 
    Coordinates = [ 
 
    new google.maps.LatLng(29, -49), 
 
    new google.maps.LatLng(29, -48), 
 
    new google.maps.LatLng(26, -48), 
 
    new google.maps.LatLng(26, -49), 
 
    new google.maps.LatLng(29, -49)]; 
 
    
 
    for(var i = 0; i < Coordinates.length-1; i ++) 
 
    { 
 
     var polyline = { 
 
      strokeWeight : 3, 
 
      path: [Coordinates[i], Coordinates[i+1]], 
 
      strokeOpacity: 1, 
 
      strokeColor: color[0], 
 
      map: map 
 
     } 
 

 
     new google.maps.Polyline(polyline); 
 
     console.log(polyline); 
 
     
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

到目前爲止，我我無法做出完美的廣場，所以我無法制定精確的路線指示。使用這種方法可以準確測定LatLong coordonate嗎？

來源

2015-10-13 Odubuc

如果圖標是越小10px的，最好是：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 

 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(28, -48), 
 
     zoom: 6, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var color = ["#FF0000", "#FFFF00", '#0000FF']; 
 

 
    var Coordinates = [ 
 
    new google.maps.LatLng(29, -51), 
 
    new google.maps.LatLng(29, -50), 
 
    new google.maps.LatLng(26, -50), 
 
    new google.maps.LatLng(26, -51), 
 
    new google.maps.LatLng(29, -51) 
 
    ]; 
 

 
    for (var i = 0; i < Coordinates.length - 1; i++) { 
 

 
    var polyline = { 
 
     strokeWeight: 3, 
 
     strokeColor: color[1], 
 
     path: [Coordinates[i], Coordinates[i + 1]], 
 
     strokeOpacity: 1, 
 
     icons: [{ 
 
      icon: { 
 
      path: 'M 0,0 0,2', 
 
      strokeOpacity: 1, 
 
      strokeWeight: 3, 
 
      strokeColor: color[0], 
 
      scale: 1 
 
      }, 
 
      repeat: '10px' 
 
     }, { 
 
      icon: { 
 
      path: 'M 0,0 0,2', 
 
      strokeOpacity: 1, 
 
      strokeWeight: 3, 
 
      strokeColor: color[2], 
 
      scale: 1 
 
      }, 
 
      repeat: '20px' 
 
     } 
 
     //and so on... ****************************************** 
 
     ], 
 
     map: map 
 
    } 
 

 
    new google.maps.Polyline(polyline); 
 
    console.log(polyline); 
 

 
    } 
 

 
    Coordinates = [ 
 
    new google.maps.LatLng(29, -49), 
 
    new google.maps.LatLng(29, -48), 
 
    new google.maps.LatLng(26, -48), 
 
    new google.maps.LatLng(26, -49), 
 
    new google.maps.LatLng(29, -49) 
 
    ]; 
 

 
    for (var i = 0; i < Coordinates.length - 1; i++) { 
 
    var polyline = { 
 
     strokeWeight: 3, 
 
     path: [Coordinates[i], Coordinates[i + 1]], 
 
     strokeOpacity: 1, 
 
     strokeColor: color[0], 
 
     map: map 
 
    } 
 

 
    new google.maps.Polyline(polyline); 
 
    console.log(polyline); 
 

 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

來源

2015-10-13 20:50:08 geocodezip

聰明。你指出了我正確的方向。這是一個附加顏色的例子：https：//jsfiddle.net/9kkppqag/1/。謝謝你的幫助：） – Odubuc

是否有可能使用SVG圖標

回答

相關問題