0
我一直在努力得到這個工作相當長一段時間了。所以，這是我想要實現的。AngularJS - ngMap自定義標記clusterer地圖+ infowindow
- 映射與羣集。
- 集羣標記應該是自定義的。
- 點擊標記打開一個自定義的infowindow。我已經成功地做到
事情是：
- 地圖自定義集羣。
- 自定義infowindow。我現在面臨
的問題是：
- 它創建默認標記，而不是自定義標記集羣的
onClick。 - 我無法爲每個標記分配唯一的
id，這樣infowindow會在標記正上方打開。 - 即使手動添加
id's，infowindow也會從標記打開一點。
爲了清楚地說明我正在努力實現的目標，我將添加一個我正試圖實現的設計圖像。 
下面的代碼在我的本地工作，但由於某種原因ng-non-bindable正在導致下面的代碼片段中的問題。
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $scope, $interval, NgMap) {
$scope.positions = [];
$scope.dynMarkers = [];
$scope.allProperties = [{
"title": "Unit 25",
"latitude": 54.779951,
"longitude": 9.334164
},
{
"title": "Unit 21",
"latitude": 47.209613,
"longitude": 15.991539
},
{
"title": "Unit 41",
"latitude": 51.97539,
"longitude": 7.596962
},
{
"title": "Unit 87",
"latitude": 54.779951,
"longitude": 9.334164
},
{
"title": "Unit 59",
"latitude": 47.414847,
"longitude": 8.23485
},
{
"title": "Unit 70",
"latitude": 47.658028,
"longitude": 9.159596
},
{
"title": "Unit 9",
"latitude": 47.525927,
"longitude": 7.68761
},
{
"title": "Unit 31",
"latitude": 50.85558,
"longitude": 9.704403
}
];
NgMap.getMap('propertyMap').then(function(map) {
var bounds = new google.maps.LatLngBounds();
for (var k in map.customMarkers) {
var cm = map.customMarkers[k];
$scope.dynMarkers.push(cm);
bounds.extend(cm.getPosition());
};
$scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {
imagePath: ''
});
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
$scope.sameLocationUnits = function(event, unit) {
$scope.map.showInfoWindow('propertyInfoWindow', unit.id);
$scope.unitInfo = unit;
};
});
});.ng-map-info-window {
\t width: 300px !important;
background-color: #181818;
color: #fff;
padding: 10px 20px !important;
border-radius: 2px;
}
.ng-map-info-window div:first-child > div:nth-child(1) {
\t border-top-color: #181818 !important;
\t border-right: 20px solid transparent !important;
\t border-left: 20px solid transparent !important;
}
.ng-map-info-window div:first-child > div:nth-child(2) {
\t width: 235px !important;
\t max-width: 235px !important;
}
.gm-style .gm-style-iw {
\t width: 275px !important;
\t max-width: 275px !important;
}
.gm-style .gm-style-iw > div:first-child {
\t width: 280px !important;
\t max-width: 280px !important;
\t position: relative;
left: -8px;
overflow-x: hidden !important;
}
.ng-map-info-window div:first-child > div:nth-child(3) div {
display: none;
}
.ng-map-info-window div:first-child > div:nth-child(4) {
display: none;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&key=AIzaSyBK9qfMYJ2vud1uiSMOJKu0A643trmBei0"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script>
<link href="custom-marker.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-controller="mapController">
<ng-map center="[40.74, -74.18]" zoom="8" id="propertyMap">
<custom-marker ng-repeat="property in allProperties" id="custom-marker-{{$index}}" position="[{{ property.latitude }},{{ property.longitude }}]" on-click="sameLocationUnits(event, property)">
<i class="map-marker"></i>
</custom-marker>
<info-window id="propertyInfoWindow">
<div ng-non-bindable>
<p>{{unitInfo.title}}</p>
</div>
</info-window>
</ng-map>
</body>
</html>