javascript - 下拉菜单和 Google map

Question

我有一个下拉菜单来显示不同的 Google map 。餐厅 map 显示出来，但当我切换到另一张 map (例如公园)时，它会显示一个灰色框，左上角有标记图标，您会在其下方看到另一张 map 的 1 秒 View /闪烁。当我在每个“neighborhood-listing”类中添加“visible”时，它会起作用，但随后会同时显示多个 map ，而不是仅显示一个。

HTML

   <div class="explore">
    <h4>Explore Your New Neighborhood</h4>
    <select id="neighborhood-select">
      <option value="Dining">Dining</option>
      <option value="Shopping">Shopping</option>
      <option value="Schools">Schools</option>
      <option value="Parks">Parks</option>
      <option value="Hospitals">Hospitals</option>
      <option value="Colleges">Colleges</option>
    </select>
  </div>
  <div class="explore-images featured-image">
    <div class="neighborhood-listing Dining visible">
      <div class="neighborhood-btns">
       <div id="map-dining"></div>
      </div>
    </div>
    <div class="neighborhood-listing Shopping ">
      <div class="neighborhood-btns">
        <div id="map-shopping"></div>
      </div>
    </div> 
    <div class="neighborhood-listing Parks ">
      <div class="neighborhood-btns">
        <div id="map-parks"></div>
      </div>
    </div> 
    <div class="neighborhood-listing Hospitals ">
      <div class="neighborhood-btns">
        <div id="map-hospitals"></div>
      </div>
    </div> 
    <div class="neighborhood-listing Colleges ">
      <div class="neighborhood-btns">
        <div id="map-colleges"></div>
      </div>
    </div>

    <div class="neighborhood-listing Schools ">
      <div class="neighborhood-btns"> 
      <div id="map-schools"></div>
      </div>
    </div>
  </div>

CSS

.explore-images .neighborhood-listing,
.explore-images .leasing-plan {
display: none;
}
.explore-images .neighborhood-listing.visible,
.explore-images .leasing-plan.visible {
display: block;
}

.explore {
padding: 2.5% 5%;
background-color: #f2efef;
}
.explore h4 {
margin-top: 0;
margin-bottom: .5em;
}

/* .directory-btns, */
.neighborhood-btns {
position: relative;
top: 0;
right: 0;
}

@media screen and (max-width: 480px) {
.desktop {
    display: none;
}
.mobile {
    display: block;
}
}

#map-dining, #map-shopping, #map-schools, #map-parks, #map-hospitals, #map-colleges{
width:100%;
height: 400px;
}

我希望从下拉菜单中选择每个 map 时都能正确显示(例如“用餐”)，并防止发生另一张 map 的 1 秒 View (在过渡期间)，基本上让它顺利过渡到下一个选定的 map 。

链接到JS Fiddle 。

<小时/>

已解决

我真的很喜欢 Godwin 的 jsfiddle 的平滑过渡，前提是调整大小也能如此平滑!我也非常喜欢 geocode zip 的 jsfiddle 的工作原理，调整大小非常完美!只是过渡不太顺利，因为在过渡期间它仍然具有米色框 View ，且标记位于左上角。所以我所做的就是将这两个代码结合起来，这几乎就是我想要的。非常感谢大家，非常感谢你们的帮助!

使用工作代码编辑 JS Fiddle: https://jsfiddle.net/sf82/fbt9p701/1/

CSS 已更改:

.explore-images .neighborhood-listing,
.explore-images .leasing-plan {
    visibility: hidden;
    position: absolute;
    height: 400px;
    width: 100%;
}
.explore-images .neighborhood-listing.visible,
.explore-images .leasing-plan.visible {
    display: block;         
    visibility: visible;
}

添加了 JS:

jQuery(document).ready(function ($) {
$('#leasing-select, #neighborhood-select, #store-directories-select').change(function () {
    var new_image = $(this).val();
    $('.explore-images .visible').fadeOut().removeClass('visible');
    $('.explore-images .' + new_image).fadeIn(function () {
        resizeMap(new_image);
    }).addClass('visible');

});
});

function resizeMap(type) {
var typeL = type.toLowerCase();
switch (typeL) {
    case 'dining':
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapOptions.center);
        break;
    case 'shopping':
        google.maps.event.trigger(map2, 'resize');
        map2.setCenter(mapOptions.center);
        break;
    case 'schools':
        google.maps.event.trigger(map3, 'resize');
        map3.setCenter(mapOptions.center);
        break;
    case 'parks':
        google.maps.event.trigger(map4, 'resize');
        map4.setCenter(mapOptions.center);
        break;
    case 'hospitals':
        google.maps.event.trigger(map5, 'resize');
        map5.setCenter(mapOptions.center);
        break;
    case 'colleges':
        google.maps.event.trigger(map6, 'resize');
        map6.setCenter(mapOptions.center);
        break;
    default:
        break;
}
}

Answer 1

如果目标元素为 display: none，Google map 将无法正确呈现。您可以通过使用 visibility 和 position:absolute 属性来解决此问题:http://jsfiddle.net/dd8q234b/7/ 。然而，这仍然存在调整大小的问题。

.explore-images .neighborhood-listing,
.explore-images .leasing-plan {
    visibility: hidden;
    position: absolute;
    height: 400px;
    width: 100%;
}
.explore-images .neighborhood-listing.visible,
.explore-images .leasing-plan.visible {
    visibility: visible;
}

更好的解决方案可能是使用相同的 map ，但在选择更改时重置标记:https://developers.google.com/maps/documentation/javascript/examples/marker-remove