我的问题很简单,但我找不到解决方法。我正在使用AngularJS和Angular Google Maps(https://github.com/angular-ui/angular-google-maps)。我有一个简单的地图,只有一个多边形和一个KML图层,其中显示了一个单独的标记在多边形内部。但是我不知道为什么,我无法点击标记。我在地图上放置了两个不同的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>
任何帮助都将是极好的!谢谢!
编辑:
我也尝试过不使用Angular,所以问题直接来自于Google Maps。 您可以在多边形外的公交线路上单击,但无法在内部单击。
您可以在此处测试代码(片段未能正常工作): http://nanakii.fr/dev/test/gmap.php