Question

现在，单击地图时将关闭打开的信息窗口。打开另一个窗口时，我需要关闭一个信息窗口。任何帮助将不胜感激。

这是当前状态：

(function($) {

  function render_map($el) {

    // var

    var $markers = $el.find('.marker');
    // Custom map styles

    var styles =

      [{
        "elementType": "geometry",
        "stylers": [{
          "color": "#f5f5f5"
        }]
      }, {
        "elementType": "labels",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "elementType": "labels.icon",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#616161"
        }]
      }, {
        "elementType": "labels.text.stroke",
        "stylers": [{
          "color": "#f5f5f5"
        }]
      }, {
        "featureType": "administrative.land_parcel",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "administrative.land_parcel",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#bdbdbd"
        }]
      }, {
        "featureType": "administrative.neighborhood",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "landscape.natural",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#ffffff"
        }]
      }, {
        "featureType": "landscape.natural",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#000000"
        }, {
          "visibility": "on"
        }, {
          "weight": 8
        }]
      }, {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [{
          "color": "#eeeeee"
        }]
      }, {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#757575"
        }]
      }, {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [{
          "color": "#e5e5e5"
        }]
      }, {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#9e9e9e"
        }]
      }, {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [{
          "color": "#ffffff"
        }]
      }, {
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#333333"
        }, {
          "visibility": "on"
        }, {
          "weight": .7
        }]
      }, {
        "featureType": "road.arterial",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#757575"
        }]
      }, {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dadada"
        }]
      }, {
        "featureType": "road.highway",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#616161"
        }]
      }, {
        "featureType": "road.local",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#9e9e9e"
        }]
      }, {
        "featureType": "transit.line",
        "elementType": "geometry",
        "stylers": [{
          "color": "#e5e5e5"
        }]
      }, {
        "featureType": "transit.station",
        "elementType": "geometry",
        "stylers": [{
          "color": "#fff"
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          "color": "#d6d6d6"
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#d6d6d6"
        }]
      }, {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#000000"
        }]
      }];

    var styledMap = new google.maps.StyledMapType(styles, {
      name: "Styled Map"
    });

    var args = {
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      panControl: false,
      zoomControl: true,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      scrollwheel: true,
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
    };

    var map = new google.maps.Map($el[0], args);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function() {
      add_marker($(this), map);
    });

    // center map
    center_map(map);

  }

  /*
   *  add_marker
   */

  function add_marker($marker, map) {

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        url: "http://studioteneleven.com/wp-content/themes/studioteneleven/img/marker.svg",
        scaledSize: new google.maps.Size(7, 7)
      }
    });

    // add to array
    map.markers.push(marker);

    // create info window
    var infowindow = new google.maps.InfoWindow({
      content: $marker.html()
    });

    google.maps.event.addListener(infowindow, 'domready', function() {

      var iwOuter = $('.gm-style-iw');
      var iwBackground = iwOuter.prev();
      // Remove the background shadow DIV
      iwBackground.children(':nth-child(2)').css({
        'display': 'none'
      });
      // Remove the white background DIV
      iwBackground.children(':nth-child(4)').css({
        'display': 'none'
      });
    });

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {

      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {

        if (!marker.open) {
          infowindow.open(map, marker);
          marker.open = true;
        } else {
          infowindow.close(map, marker);
          marker.open = false;
        }
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
          marker.open = false;
        });

      });


    }

  }

  /*
   *  center_map
   */

  function center_map(map) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each(map.markers, function(i, marker) {

      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

      bounds.extend(latlng);

    });

    map.setCenter(bounds.getCenter());
    map.setZoom(6);

  }


  $(document).ready(function() {

    $('.map').each(function() {

      render_map($(this));

    });

  });

})(jQuery);

#map {
  height: 100vh;
  width: 100%;
  left: 0;
  position: relative;
  top: 0;
}

.gm-style-iw {
  top: 18px!important;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 6px transparent;
  box-shadow: 0 1px 6px transparent;
  border: 1px solid #000;
  border-radius: 2px 2px 0 0;
}

.gm-style div div div div div div div div div {
  border-left: 0px solid #000;
  border-right: 0px solid #000;
  border-top: 0px solid;
  border-bottom: 0px solid;
  margin-top: -2px;
}

.gm-style div div div div div div div div {
  background-color: fff !important;
  margin: 0;
  padding: 0;
  top: 0;
  color: #000;
}


/*style the link*/

.gm-style div div div div div div div div a {
  color: #000;
  font-weight: 400;
  text-decoration: none;
}

.infoplace img {
  max-width: 150px !important;
}

.gm-style-iw+div {
  display: none;
}

.gm-style>div:nth-child(10) {
  display: none;
}

.gm-style .gm-style-iw {
  font-weight: 300;
  overflow: hidden;
  text-align: center;
  padding: 10px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0h0wTUPuLL4rcxJzEbuK81-d6OB-ca0w.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tachyons@4.10.0/css/tachyons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="map" id="map">
  <div class="marker" data-lat="25.733631" data-lng="-80.258801">
    <div class="infoplace">
      <h2 class="placetitle ttu">Title</h2>
      <span class="db pv3">Details</span>
      <span><a href="mailto:{{post.e_mail}}" class="black">e-mail</a></span>
      <p class="">phone</p>
    </div>
  </div>
  <div class="marker" data-lat="25.652341" data-lng="-100.375861">
    <div class="infoplace">
      <h2 class="placetitle ttu">Title</h2>
      <span class="db pv3">Details</span>
      <span><a href="mailto:{{post.e_mail}}" class="black">e-mail</a></span>
      <p class="">phone</p>
    </div>
  </div>
</div>

如果想使用此编辑器，则指向codepen的外部链接：https://codepen.io/xxccxx/pen/QBGbwL

Answer 1

如果只需要一个InfoWindow，则只需创建一个，然后在click事件的标记之间移动它即可。

   position: 'absolute',
   marginTop: "your value",
   marginLeft: "your value"

proof of concept fiddle

代码段：

// create info window
var infowindow = new google.maps.InfoWindow();
/*
 *  add_marker
 */
function add_marker($marker, map) {
  // var
  var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

  // create marker
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: {
      url: "http://studioteneleven.com/wp-content/themes/studioteneleven/img/marker.svg",
      scaledSize: new google.maps.Size(7, 7)
    }
  });

  // add to array
  map.markers.push(marker);

  // if marker contains HTML, add it to the infoWindow when clicked
  if ($marker.html()) {
    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent($marker.html());
      infowindow.open(map, marker);
      google.maps.event.addListener(infowindow, 'domready', function() {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();
        // Remove the background shadow DIV
        iwBackground.children(':nth-child(2)').css({
          'display': 'none'
        });
        // Remove the white background DIV
        iwBackground.children(':nth-child(4)').css({
          'display': 'none'
        });
      });

      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
      });
    });
  }
}

(function($) {
  // create info window
  var infowindow = new google.maps.InfoWindow();

  function render_map($el) {
    // var
    var $markers = $el.find('.marker');
    var args = {
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      panControl: false,
      zoomControl: true,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      scrollwheel: true,
    };
    var map = new google.maps.Map($el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function() {
      add_marker($(this), map);
    });

    // center map
    center_map(map);
  }

  /*
   *  add_marker
   */
  function add_marker($marker, map) {
    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillCOlor: "black",
        fillOpacity: 1.0,
        scale: 3
      }
    });

    // add to array
    map.markers.push(marker);

    // if marker contains HTML, add it to the infoWindow when clicked
    if ($marker.html()) {
      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent($marker.html());
        infowindow.open(map, marker);
        google.maps.event.addListener(infowindow, 'domready', function() {
          var iwOuter = $('.gm-style-iw');
          var iwBackground = iwOuter.prev();
          // Remove the background shadow DIV
          iwBackground.children(':nth-child(2)').css({
            'display': 'none'
          });
          // Remove the white background DIV
          iwBackground.children(':nth-child(4)').css({
            'display': 'none'
          });
        });

        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
        });
      });
    }
  }

  /*
   *  center_map
   */
  function center_map(map) {
    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each(map.markers, function(i, marker) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
      bounds.extend(latlng);
    });

    map.fitBounds(bounds);
  }

  $(document).ready(function() {
    $('.map').each(function() {
      render_map($(this));
    });
  });
})(jQuery);

#map {
  height: 100vh;
  width: 100%;
  left: 0;
  position: relative;
  top: 0;
}

.gm-style-iw {
  top: 18px !important;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 6px transparent;
  box-shadow: 0 1px 6px transparent;
  border: 1px solid #000;
  border-radius: 2px 2px 0 0;
}

.gm-style div div div div div div div div div {
  border-left: 0px solid #000;
  border-right: 0px solid #000;
  border-top: 0px solid;
  border-bottom: 0px solid;
  margin-top: -2px;
}

.gm-style div div div div div div div div {
  background-color: fff !important;
  margin: 0;
  padding: 0;
  top: 0;
  color: #000;
}


/*style the link*/

.gm-style div div div div div div div div a {
  color: #000;
  font-weight: 400;
  text-decoration: none;
}

.infoplace img {
  max-width: 150px !important;
}

.gm-style-iw+div {
  display: none;
}

.gm-style>div:nth-child(10) {
  display: none;
}

.gm-style .gm-style-iw {
  font-weight: 300;
  overflow: hidden;
  text-align: center;
  padding: 10px;
}

单击新图钉后关闭信息窗口

1 个答案: