如何让用户使用 gmap3 插件或 Google Maps Api v3 绘制多个多边形答案

【问题标题】：How can I let user draw multiple polygons using gmap3 plugin or Google Maps Api v3如何让用户使用 gmap3 插件或 Google Maps Api v3 绘制多个多边形
【发布时间】：2011-11-08 12:22:54
【问题描述】：

我对 JavaScript 和 Google Maps Api 没有太多经验。我想要达到的目标：我有一张地图，用户可以在其中放置标记或绘制多边形。我正在使用 gmap3 插件，并且我已经设法使用标记完成了我想做的所有事情（例如添加、编辑、拖动、删除等），但是我遇到了多边形问题。这是基本代码：

    $('#map-mappoints').gmap3(
    {
        action:'init',
        options:{
            zoom: 7
        }
        ,
        events: {
            click: function(event, data) {
                if($(".map #poly").hasClass('active')){
                    placePoly(data.latLng);
                } else {
                    placeMarker(data.latLng);
                }
            }
        }
    },
    {
        action:"autofit"
    }
    );


    function placePoly(location) {
        $('#map-mappoints').gmap3({ 
            action: 'addPolygon',
            options:{
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            },
            callback: function(polygon){
                var path = polygon.getPath();
                path.push(location);
                console.log(path);
            }
        }
        )
    }

我可以在控制台中看到它创建了多边形，但它只添加了一个路径元素，这是逻辑，因为它在每次点击地图后触发，但我不知道如何让它继续向多边形添加新元素，然后让用户停止（可能通过工具栏中的某个按钮），并在单击“新多边形”后创建新的。

感谢您的任何提示。

ps。英语不是我的母语，所以我很抱歉有任何错误，我尽量避免它们;)

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 jquery-gmap3

【解决方案1】：

阅读下面标题gmap3的参数

http://gmap3.net/documentation.html

对于它的主要用途，gmap3 将对象作为参数。每个对象都是一个要执行的动作。动作按顺序执行参数列表，并且每次，前一次完成。这示例先初始化google地图，然后添加两个标记

路径

指定闭环的有序坐标序列。与折线不同，多边形可能由一条或多条路径组成。因此，paths 属性可以指定一个或多个 LatLng 坐标数组。可以使用单个 LatLng 数组定义简单的多边形。更复杂的多边形可以指定一个数组数组。任何简单的数组都被转换成 MVCArrays。从 MVCArray 中插入或删除 LatLngs 将自动更新地图上的多边形。

MVCArray 是一个可变数组，因此您可以在数组中添加更多的经纬度坐标，多边形会自动更新。

希望对你有所帮助！

问候

【讨论】：