下拉菜单和Google地图

Question

我有一个下拉菜单来显示不同的Google地图。餐饮地图显示，但是当我切换到另一个地图时，比如说Parks，它会在左上角显示一个带有标记图标的灰色框，并且您会在其下方看到另一个地图的1秒视图/闪光。当我在每个“邻居列表”类中放置“可见”时，它会起作用，但是同时显示多个地图而不是一个。

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

我希望从下拉菜单中选择正确显示每个地图（如“餐饮”），并防止另一个地图的1秒视图（转换期间）发生，基本上可以顺利过渡到下一个选择的地图。

链接到JS Fiddle。

解决

我真的很喜欢Godwin的jsfiddle的顺利过渡，只要调整大小顺利！我也非常喜欢地理编码zip的jsfiddle如何工作，调整大小是完美的！只是转换不是那么顺利，因为在过渡期间它仍然具有米色的盒子视图，左上角有标记。所以我所做的就是将两个代码结合起来，而这正是我所寻找的。非常感谢你们，我非常感谢你的帮助！

编辑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地图将无法正常呈现。您可以使用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;
}

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

Answer 2

你是否在div上切换类以使它们可见/不可见？

我遇到了同样的问题，并且我发现如果加载在一个不可见的元素中，地图将无法正确渲染。 我通过初始化显示div的地图来解决问题，所以你可以在切换类时尝试初始化地图（或者你做的任何事情都是为了让div可见/不可见）。

Answer 3

您需要在显示后显示的地图上触发'resize'事件，然后重置地图的中心：

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

proof of concept fiddle

注意：我必须从initialize函数中删除“map”变量的本地定义，并删除“map resize”事件监听器。

代码段

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

var map, map2, map3, map4, map5, map6;
var mapOptions;

function initialize() {
  var myCenter = new google.maps.LatLng(39.458342, -74.633672);


  var locations = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.641467, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  var locationsA = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.651666, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  var locationsB = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.651666, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  var locationsC = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.651666, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  var locationsD = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.651666, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  var locationsE = [
    ['Cavallino Nero', 39.456832, -74.660559, 2],
    ['IHOP', 39.453284, -74.651666, 3],
    ['Longhorn Steakhouse', 39.453224, -74.651666, 4],
    ['Chilis Grill and Bar', 39.450375, -74.639798, 5],
    ['Applebees', 39.452392, -74.631073, 6]
  ];

  mapOptions = {
    center: new google.maps.LatLng(39.458342, -74.633672),
    zoom: 13
  };

  map = new google.maps.Map(document.getElementById("map-dining"), mapOptions);
  map2 = new google.maps.Map(document.getElementById("map-shopping"), mapOptions);
  map3 = new google.maps.Map(document.getElementById("map-schools"), mapOptions);
  map4 = new google.maps.Map(document.getElementById("map-parks"), mapOptions);
  map5 = new google.maps.Map(document.getElementById("map-hospitals"), mapOptions);
  map6 = new google.maps.Map(document.getElementById("map-colleges"), mapOptions);

  var infowindow = new google.maps.InfoWindow();
  var marker, markerA, markerB, markerC, markerC, markerD, markerE, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/restaurant.png'
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  for (i = 0; i < locationsA.length; i++) {
    markerA = new google.maps.Marker({
      position: new google.maps.LatLng(locationsA[i][1], locationsA[i][2]),
      map: map2,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png'
    });
    google.maps.event.addListener(markerA, 'click', (function(markerA, i) {
      return function() {
        infowindow.setContent(locationsA[i][0]);
        infowindow.open(map2, markerA);
      }
    })(markerA, i));
  }
  for (i = 0; i < locationsB.length; i++) {
    markerB = new google.maps.Marker({
      position: new google.maps.LatLng(locationsB[i][1], locationsB[i][2]),
      map: map3,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
    });
    google.maps.event.addListener(markerB, 'click', (function(markerB, i) {
      return function() {
        infowindow.setContent(locationsB[i][0]);
        infowindow.open(map3, markerB);
      }
    })(markerB, i));
  }
  for (i = 0; i < locationsC.length; i++) {
    markerC = new google.maps.Marker({
      position: new google.maps.LatLng(locationsC[i][1], locationsC[i][2]),
      map: map4,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/tree.png'
    });
    google.maps.event.addListener(markerC, 'click', (function(markerC, i) {
      return function() {
        infowindow.setContent(locationsC[i][0]);
        infowindow.open(map4, markerC);
      }
    })(markerC, i));
  }
  for (i = 0; i < locationsD.length; i++) {
    markerD = new google.maps.Marker({
      position: new google.maps.LatLng(locationsD[i][1], locationsD[i][2]),
      map: map5,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png'
    });
    google.maps.event.addListener(markerD, 'click', (function(markerD, i) {
      return function() {
        infowindow.setContent(locationsD[i][0]);
        infowindow.open(map5, markerD);
      }
    })(markerD, i));
  }
  for (i = 0; i < locationsE.length; i++) {
    markerE = new google.maps.Marker({
      position: new google.maps.LatLng(locationsE[i][1], locationsE[i][2]),
      map: map6,
      icon: 'http://maps.google.com/intl/en_us/mapfiles/marker_whiteA.png'
    });
    google.maps.event.addListener(markerE, 'click', (function(markerE, i) {
      return function() {
        infowindow.setContent(locationsE[i][0]);
        infowindow.open(map6, markerE);
      }
    })(markerE, i));
  }

  var marker1 = new google.maps.Marker({
    position: myCenter,
    map: map,
    title: "Evergreen"
  });
  var marker2 = new google.maps.Marker({
    position: myCenter,
    map: map2,
    title: "Evergreen"
  });
  var marker3 = new google.maps.Marker({
    position: myCenter,
    map: map3,
    title: "Evergreen"
  });
  var marker4 = new google.maps.Marker({
    position: myCenter,
    map: map4,
    title: "Evergreen"
  });
  var marker5 = new google.maps.Marker({
    position: myCenter,
    map: map5,
    title: "Evergreen"
  });
  var marker6 = new google.maps.Marker({
    position: myCenter,
    map: map6,
    title: "Evergreen"
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

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

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