Arrays 谷歌地图SVG标记-移动、关闭路径&；背景填充

我已经掌握了SVG谷歌标记的基本知识，但我必须做一些冗余点，以获得我想要的效果。在下面的例子中，我试图在中间形成一个“浮动”的“房子”。我想减少数组中的点，而不丢失填充背景。我想我需要使用M（moveto）或z（closepath），但这会使我的背景颜色变松

任何人也可以推荐一种工具来帮助在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>

#地图画布{
高度：350px；
宽度：600px；
}
var映射；
var多段线；
var多选项；
var iconSize=2；
函数初始化（）{
变量映射选项={
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新google.maps.LatLng（0,0）
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
google.maps.event.addListener（映射，'click'，函数（事件）{
添加点（事件）；
});
}
函数添加点（事件）{
var pathHouse='M 0,1,0，-1，-7，-7，-10，-16,0，-26,10，-16,7，-1,0，-4，-3，-4，-4，-5，-3,3，-4,4，-5,4，-9,3，-3，-10，-3，-4，-3，-16，-4，-15,3，-3，-3，-3，-3，-3，-3，-4，-4，-4，-9，-4，-5,3，-3，-4，-4，-4，-4，-3，-4，-4，-4，-4，-4，z；
变量图标={
路径：pathHouse，
填充颜色：'#FF0000'，
不透明度：.6，
主播：新google.maps.Point（0,0），
冲程重量：0，
比例：图标化，
strokeColor:'黑色'，
冲程重量：1
}
var marker=new google.maps.marker({
位置：event.latLng，
地图：地图，
可拖动：错误，
图标：图标，
zIndex:-20
});
panTo地图（事件时间）；
iconSize+=0.05；
}
$（文档）.ready（函数（）{
初始化（）；
});
单击以添加标记

要在填充的房子中有一个S形孔，您需要让路径由两个子路径组成。每个子路径以移动（M）开始，并描述形状的轮廓

所以第一条小路描述了房子的轮廓。第二个子路径描述了“S”的轮廓

你的房子部分还行，但你的“S”只是“S”的骨架

任何人也可以推荐一种工具来帮助在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>

哎呀！任何现代verctor编辑器都可以生成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';  

---

谢谢推！谷歌地图标记似乎只接受SVG词汇表的一小部分。Inkscape和其他工具生成的代码不能用作谷歌地图的制作者。我再看看。