Google Maps Polygone“可点击：false”显示无效答案

【问题标题】：Google Maps Polygone "clickable: false" shows no effectGoogle Maps Polygone“可点击：false”显示无效
【发布时间】：2016-09-15 08:45:05
【问题描述】：

我正在使用谷歌地图 API-v3。我正在向我的地图和一堆折线添加一个多边形。这些线通常位于多边形区域内。这看起来像这样：

我禁用了多边形上的点击事件：

let mapPolygone = {
            id: currentPolygone.Id, //currentPolygone is just a wrapper
            path: path,
            stroke: {
              color: currentPolygone.LineColor,
              weight: currentPolygone.LineWeight
            },
            fill: {
              color: currentPolygone.FillColor,
              opacity: currentPolygone.Opacity
            },
            editable: false,
            draggable: false,
            geodesic: false,
            // I disabled the click
            clickable: false,
            visible: true,
          }

我在折线上注册了一个点击处理程序：

let mapPolyline = {
    // currentPolyline is also a wrapper
    id: currentPolyline.Id,
    path: path,
    stroke: {
      color: currentPolyline.LineColor,
      weight: currentPolyline.LineWeight
    },
    strokeOpacity: 1,
    editable: false,
    draggable: false,
    geodesic: false,
    clickable: true,
    visible: true,
    icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow
    events: {
      //Here goes the click event. Doing stuff on 
      click: (polyline: any) => {
        this.$scope.polyLineClicked(currentPolyline.Id);
      }
    }
  }

我对谷歌和另一个thread 的期望是多边形忽略点击，而折线下方的任何元素都会获得点击。然而，这种情况并非如此。在多边形上方时我仍然会得到点击光标

它仍然会获得点击。

绘制折线/多边形的顺序以随机顺序发生。有时线条是可点击的（在多边形上方绘制时），但通常不是。

有没有什么方法可以在不提供自定义叠加层之类的东西的情况下使其正常工作？我在这里遗漏了什么吗？

提前谢谢大家！

【问题讨论】：

如果不绘制任何折线，多边形不可点击？我们能否看到一个完整的示例来演示您如何创建多边形和折线？
是否无法更改叠加层的顺序（我认为这是迄今为止我能想到的最有效和最简单的解决方案）？查看您的另一个线程，您可以将所有数据存储在 2 个数组中（一个包含折线，一个包含多边形）；然后在最后一刻在地图上设置多边形，然后是折线
@EmmanuelDelay：我想这是不可能的，因为谷歌地图使用固定的图层系统，其中折线和多边形被绘制到同一图层中（参见：stackoverflow.com/a/15674284/2221750）

标签： javascript google-maps google-maps-api-3

【解决方案1】：

好的，准备 MWE，@duncan 推荐的方法成功了。我正在使用angular-google-map 包，它为Google Maps API 提供了一个角度包装器。

Polylines 和 Polygones 被传递给一个指令：

 <ui-gmap-google-map center='map.center' 
                     zoom='map.zoom' 
                     options="map.options" 
                     aria-label="Google map"                     
                     control="map.control"
                     events="map.events" 
                     refresh="refresh">
    <!-- Polylines-->
    <ui-gmap-polyline ng-repeat="p in mapPolylines" 
                      path="p.path" 
                      stroke="p.stroke" 
                      visible="p.visible"
                      geodesic="p.geodesic" 
                      fit="true" 
                      editable="p.editable" 
                      icons="p.icons"  
                      draggable="p.draggable" 
                      events="p.events">
    </ui-gmap-polyline>

    <!-- Polygones -->
    <ui-gmap-polygon ng-repeat="p in mapPolygones" 
                     path="p.path" 
                     stroke="p.stroke" 
                     fill="p.fill" 
                     visible="p.visible"
                     geodesic="p.geodesic" 
                     fit="true" 
                     editable="p.editable" 
                     draggable="p.draggable" 
                     events="p.events">
    </ui-gmap-polygon>
</ui-gmap-google-map>

我错过了将“可点击”属性添加到 ui-gmap-polygon 标记。将此片段添加到标签时，一切都像魅力一样：

clickable="p.clickable"

无论如何，谢谢你们。

【讨论】：

【解决方案2】：

对于 poly* 堆栈排序，您还可以使用 the zIndex property，它指定“与其他 polys 相比的 zIndex”。 angular-google-maps 包还提供设置the zIndex attribute 的选项。

【讨论】：