0
저는 지금 꽤 오랫동안이 작업을하기 위해 애 쓰고 있습니다. 그래서, 여기 제가 성취하려고하는 것이 있습니다.AngularJS - ngMap 커스텀 마커 클러스터러 맵 + infowindow
- 클러스터와 매핑.
- 클러스터 표시자는 사용자 지정이어야합니다.
- 마커를 클릭하면 사용자 정의 된 정보 창이 열립니다. 내가 관리했습니다
상황은 다음과 같습니다 : 사용자 정의 클러스터와
- 지도.
- 정보 창 맞춤 설정. 내가 직면하고있어
문제가 있습니다 : 그것은 기본 마커가 아닌 사용자 정의 마커를 생성 클러스터의
onClick.- 각 마커에 고유 한
id을 할당 할 수 없기 때문에 정보창이 마커 바로 위에 열립니다. id's을 수동으로 추가하더라도 infowindow는 마커에서 약간 벗어납니다.
나는 무엇을 달성하려고하는지 명확하게 알기 위해 내가 달성하려고하는 디자인의 이미지를 추가 할 것입니다. 
아래 코드는 내 지역에서 작동하지만 어떤 이유로 ng-non-bindable이 아래 스 니펫에서 문제를 일으키는 중입니다. ngMap와 MarkerClusterer을 결합하기 위해, 당신이 지시하고 마커를 배열로 작업하는 방법을 제거해야합니다에서
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>