Array.prototype.map（）方法添加信息窗口

Question

我已按照該教程創建了一個集群Google地圖，但無法使信息窗口正常工作？ 我可以使它正常工作...只是不使用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

Answer 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+/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 ab puma"> <img src="http://unit60.com/vendo/img/logos/3.jpg" /> <h5>ab 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 abc nike adidas puma"> <img src="http://unit60.com/vendo/img/logos/3.jpg" /> <h5>abc 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 cb adidas"> <img src="http://unit60.com/vendo/img/logos/1.jpg" /> <h5>cb 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 ab nike "> <img src="http://unit60.com/vendo/img/logos/2.jpg" /> <h5>ab 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>