我已按照教程创建群集谷歌地图，但我无法让信息窗口生效？我可以让它工作，否则...只是不使用Array.prototype.map（）方法...任何帮助？
var locations = []
var data
var markerData
$('.map').each(function (get){ //gather data from html and store
data = $(this).data();
markerData = ([data.txt, data.lat, data.lng])
locations.push(markerData);
});
function initMap() {
var infowindow = new google.maps.InfoWindow(); /* SINGLE */
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 50.07821, lng: 8.23976}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(loc, i) {
return new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
animation: google.maps.Animation.DROP,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
google.maps.event.addListener(markers, 'click', function(loc){
console.log('hit')
infowindow.close(); // Close previously opened infowindow
infowindow.setContent( "<div id='infowindow'>"+ loc[0] +"</div>");
infowindow.open(map, markers);
});
}
codepen示例： http://codepen.io/unit60/pen/WGkroA
答案 0 :(得分：1)
您的标记点击侦听器位于错误的位置。它只能听一个标记：
var markers = locations.map(function(loc, i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
animation: google.maps.Animation.DROP,
label: labels[i % labels.length]
});
google.maps.event.addListener(marker, 'click', (function(loc) {
return function(evt) {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
infowindow.open(map, marker);
}}(loc)));
return marker
});
代码段
//https://developers.google.com/maps/documentation/javascript/examples/layer-kml-features
$(document).ready(function() {
initMap();
});
var locations = []
var data
var markerData
$('.map').each(function(get) { //gather data from html and store
data = $(this).data();
markerData = ([data.txt, data.lat, data.lng])
locations.push(markerData);
});
function initMap() {
var infowindow = new google.maps.InfoWindow(); /* SINGLE */
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 50.07821,
lng: 8.23976
}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(loc, i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
animation: google.maps.Animation.DROP,
label: labels[i % labels.length]
});
console.log("loc[0]=" + loc[0])
google.maps.event.addListener(marker, 'click', (function(loc) {
return function(evt) {
console.log('hit')
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
console.log("loc[0]=" + loc[0])
infowindow.open(map, marker);
}
}(loc)));
return marker
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
// this part for isotope
var $grid = $('.isotope-index').isotope({
itemSelector: '.isotope-listing',
stagger: 300,
getSortData: {
name: 'h5'
},
sortBy: 'name'
});
$grid.isotope({
// disable scale transform transition when hiding
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1
}
})
var filters = {};
$('.item-filter-select').on('change', function() {
var $this = $('option:selected');
var $parent = $(this);
var level = $(this).parent().find('select option:selected');
// get group key
var $buttonGroup = $parent.parents('.select-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[filterGroup] = level.data('value');
// combine filters
var filterValue = concatValues(filters);
$grid.isotope({
filter: filterValue
});
});
// flatten object by concatting values
function concatValues(obj) {
var value = '';
for (var prop in obj) {
value += obj[prop];
}
return value;
}html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section #vendo-search-field {
background: #ddd;
height: 400px;
}
.vendo-map {
height: 400px;
}
#map {
height: 500px;
}
.map-nav-holder {
position: relative;
width: 100%;
height: 500px;
}
.map-nav {
position: absolute;
width: 100%;
z-index: 2;
}
.shop-profile-holder {
position: relative;
top: 35px;
height: calc(100% - 35px);
overflow-y: scroll;
}
.shop-profile {
width: 100%;
height: 100px;
background: #fff;
border-bottom: 1px solid #ddd;
}
.select-group {
float: left;
width: 50%;
}
.map-nav select {
float: left;
width: 100%;
}
.map-nav .btn {
border-radius: 0;
float: left;
width: 10%;
}
select:not([multiple]) {
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em;
}
/* This bit for isotope */
.select-group {
display: inline-block;
}
.isotope {
max-width: 100%;
}
.isotope-listing {
width: 100%;
height: 100px;
padding: 5px;
border-bottom: 1px solid #ddd;
overflow: hidden;
background: #fff;
}
.isotope-listing p {
font-size: 11px;
}
.isotope-listing img {
float: left;
line-height: 90px;
border-right: 1px solid #ddd;
padding: 10px;
max-width: 150px;
margin-right: 20px;
}
.is-checked {} .is-checked:after {
content: '';
display: block;
background: tomato;
height: 4px;
max-width: 100%;
width: 100%;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="http://cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script>
<section id="vendo-search-field">
<div class="container-fluid">
<div class="row vendo-map">
<div class="col-md-6" style="padding-right:0;">
<!--start col-->
<div id="map"></div>
</div>
<!--end col-->
<div class="col-md-6" style="padding-left:0;">
<!--start col-->
<div class="map-nav-holder">
<!--start map-nav-holder-->
<div class="form-group map-nav">
<!--start map-nav-->
<!-- <button class="btn btn-default">Alle
</button> -->
<div class="select-group" data-filter-group="branchen">
<select class="custom-select form-control item-filter-select">
<option data-value="*" selected='selected'>Alle Branchen</option>
<option data-value=".a">a Schmuck & Uhren</option>
<option data-value=".b">b Restaurants</option>
<option data-value=".c">c Schreibwaren & Papeterie</option>
</select>
</div>
<div class="select-group" data-filter-group="marken">
<select class="custom-select form-control item-filter-select">
<option data-value="*" selected='selected'>Alle Marken</option>
<option data-value=".nike">Nike</option>
<option data-value=".adidas">Adidas</option>
<option data-value=".puma">Puma</option>
</select>
</div>
</div>
<!--end map-nav-->
<div class="shop-profile-holder">
<div class="isotope-index">
<div class="isotope-listing b nike adidas puma">
<img src="http://unit60.com/vendo/img/logos/1.jpg" />
<h5>b nike adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="01" data-lat="50.08521" data-lng="8.24976"></div>
</div>
<div class="isotope-listing a nike adidas puma">
<img src="http://unit60.com/vendo/img/logos/2.jpg" />
<h5>a nike adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="02" data-lat="50.08121" data-lng="8.23976"></div>
</div>
<div class="isotope-listing a b puma">
<img src="http://unit60.com/vendo/img/logos/3.jpg" />
<h5>a b puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="03" data-lat="50.07851" data-lng="8.23226"></div>
</div>
<div class="isotope-listing c adidas puma">
<img src="http://unit60.com/vendo/img/logos/4.jpg" />
<h5>c adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="04" data-lat="50.07891" data-lng="8.24996"></div>
</div>
<div class="isotope-listing a puma">
<img src="http://unit60.com/vendo/img/logos/5.jpg" />
<h5>a puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="05" data-lat="50.07321" data-lng="8.23176"></div>
</div>
<div class="isotope-listing a adidas puma">
<img src="http://unit60.com/vendo/img/logos/6.jpg" />
<h5>a adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="06" data-lat="50.07821" data-lng="8.24576"></div>
</div>
<div class="isotope-listing a b c nike adidas puma">
<img src="http://unit60.com/vendo/img/logos/3.jpg" />
<h5>a b c nike adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="07" data-lat="50.07421" data-lng="8.23376"></div>
</div>
<div class="isotope-listing b puma">
<img src="http://unit60.com/vendo/img/logos/2.jpg" />
<h5>b puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="08" data-lat="50.07521" data-lng="8.24976"></div>
</div>
<div class="isotope-listing a nike">
<img src="http://unit60.com/vendo/img/logos/5.jpg" />
<h5>a nike</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class="map" data-txt="09" data-lat="50.07921" data-lng="8.23576"></div>
</div>
<div class="isotope-listing c b adidas">
<img src="http://unit60.com/vendo/img/logos/1.jpg" />
<h5>c b adidas</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class=""></div>
</div>
<div class="isotope-listing c adidas puma">
<img src="http://unit60.com/vendo/img/logos/3.jpg" />
<h5>c adidas puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class=""></div>
</div>
<div class="isotope-listing b puma">
<img src="http://unit60.com/vendo/img/logos/6.jpg" />
<h5>b puma</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class=""></div>
</div>
<div class="isotope-listing a b nike ">
<img src="http://unit60.com/vendo/img/logos/2.jpg" />
<h5>a b nike</h5>
<p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
<div class=""></div>
</div>
</div>
</div>
<!--end shop-profile-holder-->
</div>
<!--end map-nav-holder-->
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<!--end container-->
</section>