[英]How to add cluster marker to google maps in angularjs
I am trying to add cluster marker to google maps in angularjs. 我正在尝试在angularjs中将聚类标记添加到Google地图。
I have already included the js file ( https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js ) and the images ( https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images ). 我已经包含了js文件( https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js )和图像( https://github.com/googlemaps/ js-marker-clusterer / tree / gh-pages / images )。
However the cluster still not appears. 但是,群集仍然没有出现。
This is my code: 这是我的代码:
html: 的HTML:
<section id="GoogleMaps" ng-controller="MapsController"> <div class="container"> <div> <div id="map_canvas"></div> </div> </div> </section>
controller: 控制器:
.controller('MapsController', ['$scope', '$http', function ($scope, $http) { $scope.loadData = function () { var url = 'data/LatLng.json'; return $http.get(url).then(function (response) { return response.data; }); }; $scope.initMap = function (data) { var mapOptions = { zoom: 7, center: new google.maps.LatLng(48.209500, 16.370691), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); data.forEach(function (item) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(item.LAT, item.LON), animation: google.maps.Animation.Bounce, map: map }); var options = { imagePath: 'images/m' }; var markerCluster = new MarkerClusterer(map, marker, options); }); }; $scope.loadData() .then($scope.initMap); }])
scripts: 脚本:
addTag('script', { src: 'http://maps.googleapis.com/maps/api/js' }, sync); addTag('script', { src: 'assets/js/markerclusterer.js' }, sync);
Any ideas how to add it? 任何想法如何添加它?
Thank You. 谢谢。
Initialise the MarkerClusterer as following way. 按照以下方式初始化MarkerClusterer。
$scope.initMap = function (data) {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(48.209500, 16.370691),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var markerArray = [];
data.forEach(function (item) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.LAT, item.LON),
animation: google.maps.Animation.Bounce,
map: map
});
markerArray.push(marker);
});
var options = {
imagePath: 'images/m'
};
var markerCluster = new MarkerClusterer(map, markerArray, options);
};
When you initialize it in forEach loop, it creates new object of it. 在forEach循环中初始化它时,它会创建它的新对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.