谷歌地圖SVG標記 - 移動，關閉路徑和背景填充

我已經得到了SVG谷歌標記的基礎知識，但我必須做出幾個多餘的點才能得到我想要的效果。在下面的例子中，我試圖製作一個浮動S在中間的「房子」。我想減少數組中的點而不丟失填充背景。我想我需要使用使用M（moveto）或z（近距離路徑），但這些會導致我失去背景色谷歌地圖SVG標記 - 移動，關閉路徑和背景填充

也可以任何人推薦一個工具來幫助繪製XY軸適合SVG的點。我正在使用Excel，這不是一個很好的繪圖程序。

<style> 
    #map-canvas {   
     height: 350px; 
     width: 600px;   
    } 
</style>  

<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>   
<script src="../jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 


    var map; 
    var polyLine; 
    var polyOptions; 
    var iconSize = 2; 

    function initialize() { 

     var mapOptions = { 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: new google.maps.LatLng(0,0) 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     google.maps.event.addListener(map, 'click', function(event) { 

      addPoint(event); 
     }); 
    } 

    function addPoint(event) { 

     var pathHouse = 'M 0,1 , 0,-1 , -7,-1 , -7,-16 , -10,-16 , 0,-26 , 10,-16 , 7,-16 , 7,-1 , 0,-1 , 0,-4 , -3,-4 , -4,-5 ,-3,-4 , 3,-4 , 4,-5 , 4,-9 , 3,-10 , -3,-10 , -4,-11 , -4,-15 , -3,-16 , 3,-16 , 4,-15 , 4,-15 , 3,-16 , -3,-16 , -4,-15 , -4,-11 , -3,-10 , 3,-10 , 4,-9 , 4,-5 , 3,-4 , -3,-4 , -4,-5 , -3,-4 , 0,-4 , z';  

     var icon = { 

      path: pathHouse , 
      fillColor: '#FF0000', 
      fillOpacity: .6, 
      anchor: new google.maps.Point(0,0), 
      strokeWeight: 0, 
      scale: iconSize, 
      strokeColor: 'black', 
      strokeWeight: 1 
     } 

     var marker = new google.maps.Marker({ 
      position: event.latLng, 
      map: map, 
      draggable: false, 
      icon: icon, 
      zIndex : -20 
     }); 

     map.panTo(event.latLng); 

     iconSize += .05; 
    } 

$(document).ready(function() { 
    initialize(); 
}); 

</script> 

<p>Click to add markers</p> 
<div id="map-canvas"></div>

來源

2015-07-22 Mustapha George

要在滿屋子裏有一個S形的洞，你需要讓路徑由兩條子路徑組成。每個子路徑以Move（M）開頭，並描述形狀的大綱。

所以第一個子路徑描述了房子的輪廓。第二個子路徑描述了「S」的輪廓。

你的房子部分沒問題，但你的「S」只是「S」的骨架。

也可以任何人推薦一個工具，以幫助繪製XY軸適用於SVG的點。我正在使用Excel，這不是一個很好的繪圖程序。

Yikes！任何現代的編輯器都可以生成SVG文件。試用（免費）Inkscape程序。

來源

2015-07-22 04:46:34

感謝推！ Google地圖標記似乎只接受SVG詞彙的一小部分。 Inkscape和其他人生成的代碼不能在谷歌地圖中用作製造商。我會再看一次。 –

修訂座標：

var pathHouse = 'M 0,1 , 0,-1 , -7,-1 , -7,-16 , -10,-16 , 0,-26 , 10,-16 , 7,-16 ,  7,-1 , 0,-1 , M -1,-4 , 1,-4 , 1,-16 , 5,-16 , 5,-17 , -5,-17 , -5,-16 , -1,-16 , -1,-4 , 0,-4 , 0,-17 , z';

來源

2015-07-23 12:16:09

谷歌地圖SVG標記 - 移動，關閉路徑和背景填充

回答

相關問題