Question

我正在使用Google地图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的期望是，多边形会忽略点击，而折线下方的那个元素会获得点击。然而，这种情况并非如此。当我位于多边形

之上时，我仍然会得到点击光标

它仍然可以获得点击。

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

有没有办法让这个工作没有提出自定义叠加和类似的东西？我在这里错过了什么吗？

提前谢谢大家！

Answer 1

好吧，准备好@Euncan推荐的MWE就可以了。我正在使用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>

我错过了添加＆＃34;可点击的＆＃34;属性为 ui-gmap-polygon 标记。将此剪辑添加到标签时，一切都像魅力一样：

clickable="p.clickable"

无论如何，谢谢你们。

Answer 2

对于poly *堆栈排序，您还可以使用the zIndex property，它指定＆＃34; zIndex与其他多边形＆＃34;相比较。 angular-google-maps包还提供了设置the zIndex attribute的选项。

Google Maps Polygone＆＃34; clickable：false＆＃34;显示没有效果

2 个答案: