Aly*_*Aly 5 javascript google-maps google-maps-api-3 angularjs angular-google-maps
我的问题有点简单，但我找不到如何解决它。
我将 AngularJS 与 Angular Google Maps 一起使用（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>我尝试了很多选择，但没有结果。我在这里发现了一个有同样问题的老问题，但答案没有解决。（如果在 Polygon 内，则无法从 KML 单击点）
任何帮助都会很棒！谢谢 ！
编辑 ：
我也试过没有 Angular，所以问题直接来自谷歌地图。您可以单击多边形外部的总线，但不能单击多边形内部。
您可以在此处测试代码（该代码段无法正常工作）：http : //nanakii.fr/dev/test/gmap.php
您忘记设置clickable指令的 -param （演示也没有设置 -property clickable）：
<ui-gmap-polygon clickable="p.clickable" >
'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>| 归档时间： |
|
| 查看次数： |
947 次 |
| 最近记录： |