3

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

// 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);
    }
}

它按预期完美运行，并产生这样的结果......

在此处输入图像描述

但问题是，出于显而易见的原因，我需要在多边形内添加标记。当我单击期望添加标记的多边形时，多边形似乎得到了点击而不是地图。有没有办法解决这个问题？或者让它只有地图接收点击？

4

1 回答 1

11

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

多边形选项

于 2013-01-10T07:38:13.087 回答