我在Chrome中没有任何问题，但我遇到的问题是IE和Firefox。 这是我的谷歌地图的Javascript。
我已经阅读了关于在div上进行调整大小的内容，但我不确定我需要在哪里放置它。
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBBx_SYudvabOgIGRKueVJ7UUw3WIjexWg"></script>
<script type="text/javascript">
$(document).ready(function () {
// Control scrolling features
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
var map, map2;
var comm = @Html.Raw(Json.Encode(Model.regPoints));
var cert = @Html.Raw(Json.Encode(Model.certPoints));
var locations = [];
var certLocs = [];
var allMarkers = [];
// Host
var hostname = "/" + location.hostname;
var host = '@System.Configuration.ConfigurationManager.AppSettings["hostroot"]';
if (hostname == "/localhost"){
hostname = "";
host = "";
}
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
// Map options
var mapOptions = {
center: new google.maps.LatLng(37.09024, -100.4179324),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Communities could be null if the Google maps is over the limit
if (comm != null){
for (i = 0; i < comm.length; i++) {
var count = 0;
var name = "";
var lat = "";
var long = "";
var state = "";
for (item in comm[i]) {
count++;
if (count == 1)
id = comm[i][item];
if (count == 2)
name = comm[i][item];
if (count == 3)
lat = comm[i][item];
if (count == 4)
long = comm[i][item];
if (count == 5)
state = comm[i][item];
if (count == 6)
desc = comm[i][item];
if (count == 7)
population = comm[i][item];
}
locations.push({ name: name, latlng: new google.maps.LatLng(lat, long), state: state, link: hostname + host + "Communities/CommunityPage/" + id, desc: desc, population: population });
}
}
// Add the Markers to the map
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng, map: map, title: locations[i].name,
html: "<font color=" + "blue><strong>" + locations[i].state + "</strong></font><br />" +
"<a href=/" + locations[i].link +"><font color=red><strong>" + locations[i].name + "</strong></font></a>" +
"<p> Description: " + locations[i].desc + "</p>" +
"<p> Population: " + locations[i].population + "</p>"
});
bounds.extend(locations[i].latlng);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", (function (marker) {
return function (e) {
infowindow.setContent(this.html);
infowindow.open(map, this);
}
})(marker))
}
map.fitBounds(bounds);
function clickState(lat, lng, id) {
var latLng = new google.maps.LatLng(lat, lng);
map.panTo(latLng);
}
function setCert(locs){
if (locs == 0){
$("#map2").addClass("hidden");
$("#map").removeClass("hidden");
} else {
$("#map").addClass("hidden");
$("#map2").removeClass("hidden");
// Reset Map 2 Certified Locations
var mapOptions2 = {
center: new google.maps.LatLng(37.09024, -100.4179324),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map2 = new google.maps.Map(document.getElementById("map2"), mapOptions2);
if (cert != null){
for (i = 0; i < cert.length; i++) {
var count = 0;
var name = "";
var lat = "";
var long = "";
var state = "";
for (item in cert[i]) {
count++;
if (count == 1)
id = cert[i][item];
if (count == 2)
name = cert[i][item];
if (count == 3)
lat = cert[i][item];
if (count == 4)
long = cert[i][item];
if (count == 5)
state = cert[i][item];
if (count == 6)
desc = cert[i][item];
if (count == 7)
population = cert[i][item];
}
certLocs.push({ name: name, latlng: new google.maps.LatLng(lat, long), state: state, link: hostname + host + "Communities/CommunityPage/" + id, desc: desc, population: population });
}
}
// Add Certified Markers to the map
// Add the Markers to the map
var bounds2 = new google.maps.LatLngBounds();
for (var i = 0; i < certLocs.length; i++) {
var iconBase = host + '/Css/cwhIcons/';
var icons = {
base: {
icon: iconBase + 'greenpin.png'
}
};
var marker2 = new google.maps.Marker({
position: certLocs[i].latlng, map: map2, title: certLocs[i].name,
html: "<font color=" + "blue><strong>" + certLocs[i].state + "</strong></font><br />" +
"<a href=/" + certLocs[i].link +"><font color=red><strong>" + certLocs[i].name + "</strong></font></a>" +
"<p> Description: " + certLocs[i].desc + "</p>" +
"<p> Population: " + certLocs[i].population + "</p>",
icon: icons['base'].icon
});
bounds2.extend(certLocs[i].latlng);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker2, "click", (function (marker2) {
return function (e) {
infowindow.setContent(this.html);
infowindow.open(map2, this);
}
})(marker2))
}
map2.fitBounds(bounds2);
}
}
</script>
}
这是一些标记：
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" onclick="setCert(0);" data-toggle="tab">Registered</a></li>
<li><a href="#tab2" onclick="setCert(1);" data-toggle="tab">Certified</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
@foreach (var st in Model.regCommunities)
{
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@st.state</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
@foreach (var pt in st.points)
{
<li role="presentation" onclick="clickState(@pt.latitude, @pt.longitude, @pt.CommunityId);"><a role="menuitem" tabindex="-1" href="@Model.host/Communities/CommunityPage/@pt.CommunityId">@pt.CommunityName</a></li>
}
</ul>
</div>
}
</div>
<div id="tab2" class="tab-pane">
@foreach (var st in Model.cerCommunities)
{
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@st.state</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
@foreach (var pt in st.points)
{
<li role="presentation" onclick="clickState(@pt.latitude, @pt.longitude, @pt.CommunityId);"><a role="menuitem" tabindex="-1" href="@Model.host/Communities/CommunityPage/@pt.CommunityId">@pt.CommunityName</a></li>
}
</ul>
</div>
}
</div>
</div>
</div>
<div>
<h4>Map Legend:</h4>
</div>
</div>
<div class="col-lg-9 col-md-12">
<div id="map" class="img-responsive" style="max-width:100%; height:500px"></div>
<div id="map2" class="img-responsive hidden" style="width:720px; height: 500px;"></div>
</div>
</div>
</div>