禁用点击多边形 [英] Disable click on polygon

问题描述

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

  // Maps 
 $（document）.ready（function（）{
 if（$（document）.find（map_canvas））
 Maps.init（）; 
}）; 
 var Maps = {}; 
 //要显示的地图
 Maps.map; 
 //标记列表
 Maps.markers = new Array（）; 
 Maps.markers.previous; 
 Maps.lines = new Array（）; 
 Maps.lines.toStart; 
 Maps.area; 
 //初始化地图
 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）;}）; 
} 
 //向地图添加一个标记
 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 =函数（路径）{
 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（{
路径：Maps.markers，
 strokeColor：＃000000，
 strokeOpacity：0，
 strokeWeight ：0，
 fillColor：＃FF0000，
 fillOpacity：0.35 
}）; 
 Maps.area.setMap（Maps.map）; 
 
 
 
 
 $ b $ p 
 $ b 
它可以像预期的那样完美地生成一个像这样的结果.... 
 
 
 
  
 
 
 
但问题是，我需要在多边形内部添加标记，原因很明显。当我点击希望添加标记的多边形时，该多边形似乎获得了点击而不是地图。无论如何要解决这个问题吗？或者只是让地图收到点击？
解决方案
有一个可点击的属性在多边形选项中。将其设置为false，多边形将忽略点击并且事件将落入地图。
 
 
 
  Polygon Options  
 
I have the following code to highlight an area on google maps using the 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);
    }
}
It works perfectly as expected an produces a result like so....



But the problem is, is that I need to add markers inside the polygon for obvious reasons. When I click on the polygon expecting a marker to be added the polygon seems to be getting the clicks and not the maps. Is there anyway to get around this? Or make it so only the map receives the clicks?
解决方案
There is a clickable property in the polygon options.  Set that to false and the polygon will ignore clicks and the event will fall through to the map.

Polygon Options

                        
这篇关于禁用点击多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！