4
我看了其他類似的線程，我花了數小時試圖解決這個問題。谷歌地圖API不起作用，地圖只顯示調整大小或刷新頁面後？
resize事件不適用於我。
基本上只有一個灰色框最初加載，它只是當我刷新或調整瀏覽器的大小，然後地圖加載完全。
我使用的代碼如下給出了地圖：
<script>
function initMap() {
var center1 = {
lat: 51.258426,
lng: -1.361344
};
var londoneye = {
lat: 51.503331,
lng: -0.119543
};
var bigben = {
lat: 51.500726,
lng: -0.124629
};
var tower = {
lat: 51.508139,
lng: -0.075939
};
var ss = {
lat: 51.449164,
lng: -2.608417
};
var windsor = {
lat: 51.483907,
lng: -0.604435
};
var stone = {
lat: 51.178895,
lng: -1.826215
};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: center1
});
var map1 = new google.maps.Map(document.getElementById('map1'), {
zoom: 14,
center: londoneye
});
var map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 14,
center: bigben
});
var map3 = new google.maps.Map(document.getElementById('map3'), {
zoom: 14,
center: tower
});
var map4 = new google.maps.Map(document.getElementById('map4'), {
zoom: 14,
center: ss
});
var map5 = new google.maps.Map(document.getElementById('map5'), {
zoom: 14,
center: windsor
});
var map6 = new google.maps.Map(document.getElementById('map6'), {
zoom: 14,
center: stone
});
var boundary = new google.maps.Map(document.getElementById('boundary'), {
zoom: 8,
center: center1
});
var cityCircle = new google.maps.Circle({
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.1,
map: boundary,
center: center1,
radius: 100000
});
var marker1 = new google.maps.Marker({
position: londoneye,
map: map
});
var marker12 = new google.maps.Marker({
position: londoneye,
map: map1
});
var marker2 = new google.maps.Marker({
position: bigben,
map: map
});
var marker22 = new google.maps.Marker({
position: bigben,
map: map2
});
var marker3 = new google.maps.Marker({
position: tower,
map: map
});
var marker32 = new google.maps.Marker({
position: tower,
map: map3
});
var marker4 = new google.maps.Marker({
position: ss,
map: map
});
var marker42 = new google.maps.Marker({
position: ss,
map: map4
});
var marker5 = new google.maps.Marker({
position: windsor,
map: map
});
var marker52 = new google.maps.Marker({
position: windsor,
map: map5
});
var marker6 = new google.maps.Marker({
position: stone,
map: map
});
var marker62 = new google.maps.Marker({
position: stone,
map: map6
});
var marker1content = '<b><font color="black">London Eye</font></b>'
var marker2content = '<b><font color="black">Big Ben</font></b>'
var marker3content = '<b><font color="black">Tower of London</font></b>'
var marker4content = '<b><font color="black">SS Great Brtain</font></b>'
var marker5content = '<b><font color="black">Windsor Castle</font></b>'
var marker6content = '<b><font color="black">Stonehenge</font></b>'
var infowindow1 = new google.maps.InfoWindow({
content: marker1content
});
var infowindow2 = new google.maps.InfoWindow({
content: marker2content
});
var infowindow3 = new google.maps.InfoWindow({
content: marker3content
});
var infowindow4 = new google.maps.InfoWindow({
content: marker4content
});
var infowindow5 = new google.maps.InfoWindow({
content: marker5content
});
var infowindow6 = new google.maps.InfoWindow({
content: marker6content
});
marker1.addListener('click', function() {
infowindow1.open(map, marker1);
});
marker2.addListener('click', function() {
infowindow2.open(map, marker2);
});
marker3.addListener('click', function() {
infowindow3.open(map, marker3);
});
marker4.addListener('click', function() {
infowindow4.open(map, marker4);
});
marker5.addListener('click', function() {
infowindow5.open(map, marker5);
});
marker6.addListener('click', function() {
infowindow6.open(map, marker6);
});
}
</script>
我已經看過了瀏覽器控制檯，並沒有錯誤。
正如我之前所說的，我也嘗試了所有其他類似線程所提到的resize函數。
任何人都可以請幫忙嗎？
編輯：我也根據請求添加了下面的CSS，每個id然後對應一個div。
#map {
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map1{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map2{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map3{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map4{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map5{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map6{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#boundary{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
可能需要看到您的HTML和CSS的大小的地圖。此外爲了良好的調試目的...註釋掉一切，但一張地圖..那個工作，然後適用於其他人。你可能已經想到或完成了。 – user1628733
我現在也附上CSS – Azzie
我有同樣的問題，這裏是一個視頻：https：//youtu.be/CGxR21h5WBQ打開字幕。控制檯處於「詳細」模式。 –