我的问题有点简单,但我找不到解决方法。
我将 AngularJS 与 Angular 谷歌地图一起使用(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>
我尝试了很多选择,但没有结果。我在这里发现了一个同样问题的老问题,但答案并没有解决它。(如果在多边形内,则无法从 KML 单击点)
任何帮助都会很棒!谢谢 !
编辑 :
我也试过不使用 Angular,所以问题直接来自谷歌地图。您可以单击多边形外部的总线,但不能单击多边形内部。
您可以在此处测试代码(代码段无法正常工作): http: //nanakii.fr/dev/test/gmap.php