Array.prototype.map() method add infowindow

2019-09-03 21:54发布

站内文章 / JavaScript
24 0 0

问题:

I have followed the tutorial to create a cluster google map, but i can not get the info window to work? I can get it to work otherwise... just not with the Array.prototype.map() method... any help?

    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 example here: http://codepen.io/unit60/pen/WGkroA

回答1:

Your marker click listener is in the wrong place. It can only listen on one marker:

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
});

proof of concept fiddle

code snippet:

//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>



标签： javascript google-maps-api-3 markerclusterer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~