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

Question

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

正如你可以在我的示例代码中看到的那样，我将每个对象存储在集合“lot”中，但是 - 单击它们只会给我点击的经纬度。我想我可能需要循环通过我的多边形，并检查点被点击是否相交，从而找出它是哪个多边形...有没有更简单的解决方案？

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

原来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; 
       } 
      } 
      } 

     }); 

Answer 3

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

我的例子（其地图美国的上创建的状态）

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