无法单击多边形内的 KML 图层

Question

我的问题有点简单，但我找不到解决方法。

我正在使用 AngularJS 和 Angular Google 地图 (https://github.com/angular-ui/angular-google-maps)

我有一个简单的地图，只有一个多边形和一个 KML 图层，它在多边形内显示一个标记。

但不知道为什么，我无法点击标记。我在地图上放置了两个不同的 KML 图层，因此您可以看到多边形外部的一个可点击，而内部的第二个则不可点击。

你可以看下面的代码:

'use strict';
angular.module("map", ['uiGmapgoogle-maps'])

.controller("MapController",['$scope', '$http', function ($scope, $http) {
 $scope.map = {
  center: {
   latitude: 48.80913908755741,
   longitude: 3.0915678394317014
  },
  zoom: 12,
  bounds: {}
 };

 $scope.polygons = [{
  id: 1,
  path: [
   { latitude: 48.825218, longitude: 3.050508 },
   { latitude: 48.823409, longitude: 3.101664 },
   { latitude: 48.792885, longitude: 3.111105 },
   { latitude: 48.793224, longitude: 3.060465 }
  ],
  stroke: {
   color: '#584885',
   weight: 2
  },
  editable: false,
  draggable: false,
  geodesic: false,
  visible: true,
  clickable: false,
  zindex: -1,
  fill: {
   color: '#E6E6E6',
   opacity: 0.6
  }
 }];

 $scope.kmlLayerOptions1 = {
  url: "http://nanakii.fr/up/ligne_bus.kml",
  preserveViewport: true
 };
 $scope.kmlLayerOptions2 = {
  url: "http://nanakii.fr/up/ligne_bus2.kml",
  preserveViewport: true
 };
 $scope.showKml = true;
}]);

* { margin: 0; padding: 0;}

body, html { height:100%; }

.angular-google-map-container  {
    position:absolute;
    width:100%;
    height:100%;
}

<html ng-app="map">

<head>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps_dev_mapped.js"></script>
 <script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
</head>

<body ng-controller="MapController">
 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
  <ui-gmap-polygon static="true" ng-repeat="p in polygons track by p.id" path="p.path" stroke="p.stroke" visible="p.visible" geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable">
  </ui-gmap-polygon>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions1" show="showKml"></ui-gmap-layer>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions2" show="showKml"></ui-gmap-layer>
  <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"></ui-gmap-marker>
    </ui-gmap-google-map>
</body>
</html>

我尝试了很多选项，但没有结果。我在这里发现了一个有同样问题的老问题，但答案没有解决。 (Can't click point from KML if inside Polygon)

任何帮助都会很棒！谢谢！

编辑：

我也尝试过不使用 Angular，所以问题直接来自 Google 地图。可以点击多边形外的公交线路，不能点击多边形内。

您可以在此处测试代码（该代码段未正常运行）： http://nanakii.fr/dev/test/gmap.php

Answer 1

重叠的多边形可能是问题所在吗？我认为多边形获得了点击，而不是标记，但在那种情况下 "clickable: false" 应该足够了。

我认为一定还有另一个问题，正如 gmaps 文档中所述："All features are displayed on the map in order of their zIndex, with higher values displaying in front of features with lower values. Markers are always displayed in front of line-strings and polygons." 显然情况并非如此。

尝试为所有元素指定 zIndex

Answer 2

您忘记为指令设置 clickable-param（演示也没有设置 clickable-属性）：

<ui-gmap-多边形 <b>clickable="p.clickable"</b> >

'use strict';


angular.module("map", ['uiGmapgoogle-maps'])

.controller("MapController", ['$scope', '$http',
  function($scope, $http) {
    $scope.map = {
      center: {
        latitude: 48.80913908755741,
        longitude: 3.0915678394317014
      },
      zoom: 12,
      bounds: {}
    };

    $scope.polygons = [{
      id: 1,
      clickable: false,
      path: [{
        latitude: 48.825218,
        longitude: 3.050508
      }, {
        latitude: 48.823409,
        longitude: 3.101664
      }, {
        latitude: 48.792885,
        longitude: 3.111105
      }, {
        latitude: 48.793224,
        longitude: 3.060465
      }],
      stroke: {
        color: '#584885',
        weight: 2
      },
      editable: true,
      draggable: false,
      geodesic: false,
      visible: true,

      zindex: -1,
      fill: {
        color: '#E6E6E6',
        opacity: 0.6
      }
    }];

    $scope.kmlLayerOptions1 = {
      url: "http://nanakii.fr/up/ligne_bus.kml",
      preserveViewport: true
    };
    $scope.kmlLayerOptions2 = {
      url: "http://nanakii.fr/up/ligne_bus2.kml",
      preserveViewport: true
    };
    $scope.showKml = true;
  }
]);

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
.angular-google-map-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script>
  // only for the code-snippet
  document.getElementsByTagName('html')[0].setAttribute('ng-app', 'map')
  document.getElementsByTagName('body')[0].setAttribute('ng-controller', 'MapController')
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>


<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
  <ui-gmap-polygon static="true" ng-repeat="p in polygons track by p.id" path="p.path" clickable="p.clickable" stroke="p.stroke" visible="p.visible" geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable">
  </ui-gmap-polygon>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions1" show="showKml"></ui-gmap-layer>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions2" show="showKml"></ui-gmap-layer>
  <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"></ui-gmap-marker>
</ui-gmap-google-map>

无法单击多边形内的 KML 图层

Can't click on KML Layer inside a polygon

javascript

google-maps

google-maps-api-3

angularjs

angular-google-maps