[英]InfoWindow on multiple marker on google maps is not working - angularjs
我正在尝试实现如下所示的功能: http : //www.geocodezip.com/SO_OverQueryLimitC.html
但是,我没有设法在其上显示InfoWindow。 我想显示具有多个确切位置的数据的InfoWindow。
这是我的代码:
HTML:
<section id="GoogleMaps" ng-controller="MapsController"> <div class="container"> <div> <div id="map_canvas"></div> </div> </div> </section>
控制器:
.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(3.9443, 101.6954), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var infowindow = new google.maps.InfoWindow(); var markers = []; var LatLng; var text; var marker; data.forEach(function (item) { var icons; LatLng = new google.maps.LatLng(item.LAT, item.LON); text = item.TYPE1; if (item.TYPE1 == '1' && item.TYPE2 == '1') { icons = 'http://www.googlemapsmarkers.com/v1/' + '1' + '/FD7567'; } else if (item.TYPE1 == '1' && item.TYPE2 == '2') { icons = 'http://www.googlemapsmarkers.com/v1/' + '2' + '/FD7567'; } else if (item.TYPE1 == '1' && item.TYPE2 == '3') { icons = 'http://www.googlemapsmarkers.com/v1/' + '3' + '/FD7567'; } else if (item.TYPE1 == '2' && item.TYPE2 == '1') { icons = 'http://www.googlemapsmarkers.com/v1/' + '1' + '/6991FD'; } else if (item.TYPE1 == '2' && item.TYPE2 == '2') { icons = 'http://www.googlemapsmarkers.com/v1/' + '2' + '/6991FD'; } else { icons = 'http://www.googlemapsmarkers.com/v1/' + '3' + '/6991FD'; } marker = new google.maps.Marker({ position: LatLng, icon: icons, clickable: true, }); markers.push(marker); }); var options = { imagePath: 'images/m' }; var markerCluster = new MarkerClusterer(map, markers, options); ///get array of markers currently in cluster var allMarkers = markerCluster.getMarkers(); //check to see if any of the existing markers match the latlng of the new marker if (allMarkers.length != 0) { for (var i = 0; i < allMarkers.length; i++) { var existingMarker = allMarkers[i]; var pos = existingMarker.getPosition(); if (LatLng.equals(pos)) { text = text + " & " + text; } } } google.maps.event.addListener(marker, 'click', function () { console.log('hi'); //return nothing infowindow.close(); infowindow.setContent(text); infowindow.open(map, marker); }); markerCluster.addMarker(marker); return marker; }; $scope.loadData() .then($scope.initMap); }])
脚本:
addTag('script', { src: 'http://maps.googleapis.com/maps/api/js' }, sync); addTag('script', { src: 'assets/js/markerclusterer.js' }, sync);
更新:我试图在click事件中添加console.log(),但是什么也没显示。 当我单击时,它没有转到该功能。
有什么想法如何解决吗?
谢谢。
为了在单击MarkerClusterer
显示信息窗口,需要应用以下更改:
1)将zoomOnClick
设置为false
可禁用默认的点击处理程序:
var options = {
zoomOnClick: false
};
2)为MarkerClusterer
对象注册自定义 click
事件处理程序:
google.maps.event.addListener(markerCluster, "click", function (mCluster) {
infowindow.setContent("<h2>Some content goes here...</h2>");
infowindow.setPosition(mCluster.getCenter());
infowindow.open(map);
});
例
更新 :已更新,以演示如何处理标记
click
事件
angular.module('MapsApp', []) .controller('MapsController', ['$scope', '$http', function ($scope, $http) { $scope.loadData = function () { var url = 'https://gist.githubusercontent.com/vgrem/2bea7539ff81168adf2a0bb8056972c3/raw/LatLng.json'; return $http.get(url).then(function (response) { return response.data; }); }; var createMarker = function (map, pos,infowindow,content) { var marker = new google.maps.Marker({ position: pos, map: map }); google.maps.event.addListener(marker, 'click', function () { infowindow.close(); infowindow.setContent(content); infowindow.open(map, marker); }); return marker; } $scope.initMap = function (data) { var mapOptions = { zoom: 4, center: new google.maps.LatLng(39.8282, -98.5795), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var infowindow = new google.maps.InfoWindow(); var markers = data.map(function (value,idx) { var coords = value.split(","); var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])); return createMarker(map, latlng,infowindow,'Info for marker ' + idx ); }); var options = { imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m', //zoomOnClick: false }; var markerCluster = new MarkerClusterer(map, markers, options); /*google.maps.event.addListener(markerCluster, "click", function (mCluster) { infowindow.setContent("<h2>Some content goes here...</h2>"); infowindow.setPosition(mCluster.getCenter()); infowindow.open(map); });*/ }; $scope.loadData() .then($scope.initMap); }]);
#map_canvas { height: 420px; width: 100%; margin: 0; padding: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> <section ng-app="MapsApp" ng-controller="MapsController"> <div class="container"> <div> <div id="map_canvas"></div> </div> </div> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.