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

【问题标题】：Can't click on KML Layer inside a polygon无法单击多边形内的 KML 图层
【发布时间】：2015-05-07 19:46:40
【问题描述】：

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

我正在使用 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，所以问题直接来自谷歌地图。您可以点击多边形外的公交线路，但不能点击多边形内部。

您可以在此处测试代码（sn-p 无法正常工作）： http://nanakii.fr/dev/test/gmap.php

【问题讨论】：

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

【解决方案1】：

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

<ui-gmap-polygon <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 图层放在多边形上方？我尝试了 zindex 选项，但它没有按我的意愿工作......
不，这是不可能的，请参阅：stackoverflow.com/questions/28837030/…。 zIndex 在这里不会有任何影响，因为多边形将在另一个地图窗格中呈现（zIndex 比将呈现 KmlLayer 的窗格更高）

【解决方案2】：

重叠的多边形会是问题吗？我认为多边形得到了点击，而不是标记，但在这种情况下，“可点击：假”就足够了。

我认为肯定还有另一个问题，如 gmaps 文档中所述：“所有要素都按其 zIndex 的顺序显示在地图上，较高的值显示在较低值的要素前面。标记总是显示在线串和多边形的前面。"显然情况并非如此。

尝试为所有元素指定 zIndex

【讨论】：