0
私は今かなりの時間この作業をするのに苦労してきました。だから、私が達成しようとしているのはここです。AngularJS - ngMapカスタムマーカークラスターマップ+ infowindow
- クラスタを使用したマップ。
- クラスタマーカーはカスタムである必要があります。
- マーカーをクリックすると、カスタマイズされた情報ウィンドウが開きます。私はやることができた
ものがあります:カスタムクラスタと
- 地図。
- 情報ウィンドウをカスタマイズします。私が直面してる
の問題は、以下のとおりです。それは、デフォルトのマーカーではなく、カスタムマーカーを作成し、クラスタの
onClick
。- 各マーカーに固有の
id
を割り当てることができないため、インフォボックスがマーカーのすぐ上に開きます。 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>