如何获取单击多边形的引用？ （谷歌地图api v3）

Question

我已经设置了一些多边形，把它们画在地图上就好了。我还设法在点击它们时触发console.log。但是，我将如何确定实际点击哪个多边形？

正如您在我的示例代码中所看到的，我将每个对象存储在集合“lots”中，但是 - 单击它们只会给我一些长时间的点击。我想我可能需要遍历我的多边形并检查点击点是否与它们相交并因此找出它是哪个多边形...是否有更简单的解决方案？

var lot = new google.maps.Polygon({
    paths: me.area,
    strokeColor: 'black',
    strokeOpacity: 0.35,
    strokeWeight: 1,
    fillColor: fillcol,
    fillOpacity: 0.35
});

lot.setMap(map);
var obj = {
    'id':me.id,
    'rented':me.rented,
    'area':lot
};

google.maps.event.addListener(lot, 'click', function(event) {
    console.log(event);
});

lots.push(lot);

Answer 1

为什么在创建它们时不为每个多边形分配一些id属性，之后只使用 this.myID ？实际上，您可以将所需的所有信息挂在该多边形对象上。

var lot = new google.maps.Polygon({
        paths: me.area,
        strokeColor: 'black',
        strokeOpacity: 0.35,
        strokeWeight: 1,
        fillColor: fillcol,
        fillOpacity: 0.35
    });

    lot.setMap(map);

    var obj = {
        'id':me.id,
        'rented':me.rented,
        'area':lot
    };
    lot.objInfo = obj;

    google.maps.event.addListener(lot, 'click', function(event) {
        console.log(this.objInfo);
    });

    lots.push(lot);

它比循环中的路径比较更有效，或者我错过了什么？ ：）

Answer 2

如果我可以稍微采用不同的解决方案，我遇到了同样的问题并发现您可以在多边形上定义自定义属性。

我的例子（在美国地图上创建一个州）。

poly = new google.maps.Polygon({
    map_state_id: map_state_id,
    paths: pts,
    fillColor: colour,
    fillOpacity: 0.66,
    strokeWeight: 1,
    clickable:true
    });

在这种情况下，“map_state_id”是自定义属性。我已经将它定义为州的ID（阿拉巴马州为1，阿拉斯加州为2，等）。

然后，当稍后点击特定状态时，可以将此“map_state_id”传递给事件函数。

google.maps.event.addListener(poly, 'click', function() 
    {
    var map_state_id = this.map_state_id; //retrieve correct state_id

    $.ajax(
        {
        type: "POST",
        url: "http://www...get_state_info.php",
        data: {state_id : map_state_id},
        dataType: "html",
        success: function(data)
            {
            $("#state_info").html(data); //display some info
            }                       
        });
    });

我在http://dominoc925.blogspot.com/2011/12/add-your-own-property-field-to-google.html

找到了这个特殊的概念

Answer 3

原来，getPath（）就像魅力一样。我没有意识到我实际上已经在click事件上传递了多边形引用，为了将它与我存储的“lot”相匹配，我只是遍历我存储的批次并将this.getPath与other.getPath进行比较，如果它们匹配，我知道哪个是单击，现在可以显示与此特定对象相关的信息。

这是一个代码示例： （停车是我的停车区域对象的一系列，它们本身有包含停车场对象的阵列）

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

     var myPath = this.getPath();

          for(var i = 0; i < parking.length; i++){
            for(var j = 0; j < parking[i].lots.length; j++){
                var lot = parking[i].lots[j];

                var otherPath = lot.poly.getPath();

                if(otherPath == myPath){
                    console.log(lot);
                    break;
                }
            }
          }

        });