禁用单击多边形

时间:2013-01-10 07:20:20

标签: javascript google-maps google-maps-api-3 google-maps-markers

我有以下代码使用javascript v3 api在Google地图上突出显示某个区域。

// Maps
$(document).ready(function(){
    if($(document).find("map_canvas"))
        Maps.init();
});
var Maps = {};
//The map to display
Maps.map;
//List of markers
Maps.markers = new Array();
Maps.markers.previous;
Maps.lines = new Array();
Maps.lines.toStart;
Maps.area;
//init the map
Maps.init = function() {
    var mapOptions = {
      center: new google.maps.LatLng(-39.483715,176.8942277),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    Maps.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addListener(Maps.map, 'click', function(event){Maps.addMarker(event.latLng);});
}
//Add a marker to the maps
Maps.addMarker = function(latLng){
    var marker = new google.maps.Marker({
        position: latLng,
        map: Maps.map
    });
    Maps.markers.push(latLng);
    console.log(Maps.markers.length);
    if(Maps.markers.length > 1){
        Maps.drawLine([Maps.markers.previous, latLng]); 
    }
    Maps.markers.previous = latLng;
}

Maps.drawLine = function(path){
    var Line = new google.maps.Polyline({
        path: path,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    Line.setMap(Maps.map);
    if(Maps.markers.length > 2){
        if(Maps.lines.toStart != null)
            Maps.lines.toStart.setMap(null);
        Maps.lines.toStart = new google.maps.Polyline({
            path: [path[path.length - 1], Maps.markers[0]],
            strokeColor: "#0000FF",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        Maps.lines.toStart.setMap(Maps.map);
        if(Maps.area != null)
            Maps.area.setMap(null);
        Maps.area = new google.maps.Polygon({
            paths: Maps.markers,
            strokeColor: "#000000",
            strokeOpacity: 0,
            strokeWeight: 0,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });
        Maps.area.setMap(Maps.map);
    }
}

它完美地按预期工作,产生一个像这样的结果......

enter image description here

但问题是,我需要在多边形内添加标记,原因很明显。当我点击希望添加标记的多边形时,多边形似乎是获得点击而不是地图。反正有没有绕过这个?或者只有地图才能获得点击次数?

1 个答案:

答案 0 :(得分:9)

多边形选项中有clickable属性。将其设置为false,多边形将忽略点击,事件将落入地图。

Polygon Options