[英]InfoWindow on multiple marker on google maps is not working - angularjs
I am trying to implement a function like this maps: http://www.geocodezip.com/SO_OverQueryLimitC.html 我正在尝试实现如下所示的功能: http : //www.geocodezip.com/SO_OverQueryLimitC.html
However, I didn't manage to show the InfoWindow on it. 但是,我没有设法在其上显示InfoWindow。 I want to show the InfoWindow with data that has multiple exact location.
我想显示具有多个确切位置的数据的InfoWindow。
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(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); }])
scripts: 脚本:
addTag('script', { src: 'http://maps.googleapis.com/maps/api/js' }, sync); addTag('script', { src: 'assets/js/markerclusterer.js' }, sync);
Update: I tried to add console.log() inside click event, but it shows nothing. 更新:我试图在click事件中添加console.log(),但是什么也没显示。 When I clicked, it did not go to the function.
当我单击时,它没有转到该功能。
Any ideas how to solve it? 有什么想法如何解决吗?
Thank You. 谢谢。
In order to display info window once the MarkerClusterer
is clicked, the following changes needs to be applied: 为了在单击
MarkerClusterer
显示信息窗口,需要应用以下更改:
1) set zoomOnClick
to false
to disable default click handler: 1)将
zoomOnClick
设置为false
可禁用默认的点击处理程序:
var options = {
zoomOnClick: false
};
2) register custom click
event handler for MarkerClusterer
object: 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);
});
Example 例
Update : has been updated to demonstrate how to handle marker
click
event更新 :已更新,以演示如何处理标记
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.