在我的一个客户端项目中我使用的是ngMap(http://ngmap.github.io/),但是我对这个"指令"有问题:如何用户标记集群和这样的地图:
<div ng-controller="MyCtrl">
<map center="41,-87" zoom="3">
<info-window id="foo2">
<div ng-non-bindable="">
Lat/Lng: {{this.getPosition()}}<br/>
<ul>
<li ng-repeat='item in store.items'>{{item}}</li>
</ul>
</div>
</info-window>
<marker ng-repeat="(id, store) in stores" id="{{id}}"
position="{{store.position}}"
on-click="showStore(event, id)"
></marker>
</map>
</div>
我搜索了示例页面和代码,但没有关于如何在我的情况下使用标记群集的文档。
是否有人使用此ngmap?或者我是否需要更改google map angularjs指令?
感谢。
答案 0 :(得分:10)
MarkerClusterer是Google Maps JavaScript API v3的单独库,以下是演示如何将MarkerClusterer与ng-map一起使用的工作示例:< / p>
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
$scope.initMarkerClusterer();
});
$scope.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
$scope.initMarkerClusterer = function () {
var markers = $scope.cities.map(function (city) {
return $scope.createMarkerForCity(city);
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
return new MarkerClusterer($scope.map, markers, mcOptions);
};
$scope.createMarkerForCity = function (city) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(city.pos[0], city.pos[1]),
title: city.name
});
google.maps.event.addListener(marker, 'click', function () {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
});
return marker;
}
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
</ng-map>
</div>