谷歌地图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标记 - 移动，关闭路径和背景填充

回答

相关问题