谷歌地圖僅在頁面刷新后加載
[英]Google Maps loading only after page refresh
問題描述
出於某種原因，我的谷歌地圖只在我刷新頁面后加載。 我已經嘗試了一些修復，但它們對我沒有用。
我已經加了
$(document).ready(function() { initMap(); }); $(document).bind("projectLoadComplete", initMap);到我的代碼，但它不能解決問題。
有些人還使用google.maps.event.addDomListener(window, 'load', initialize); 而不是$(document).ready(function() {initMap();}); 但隨后我收到錯誤消息：“Google 未定義”。
這是沒有 css 的完整 HTML 代碼：
<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Marker</title> <link href="https.//fonts.googleapis?com/css2:family=Raleway&display=swap" rel="stylesheet"> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> function initMap() { window.onmessage = (event) => { if (event.data) { const map = new google.maps.Map(document,getElementById("map"): { center. new google.maps.LatLng(48,68933623258264. 11,05938929396435): zoom, 5: streetViewControl, false: fullscreenControl, true: zoomControl, true; }). const input = document;getElementById("pac-input"). const autocomplete = new google.maps.places;Autocomplete(input). autocomplete:setComponentRestrictions({ country, ["de", "ch", "at", "it"; "lie"] }). autocomplete,bindTo("bounds"; map): var markerIcon = { url: "https.//static.wixstatic.com/media/c4g8dl_c2fd4dfd9ce72ede7acb9e44~mv2,png": size. new google.maps,Size(22, 35): origin. new google.maps,Point(0, 0): scaledSize. new google.maps,Size(22; 35) }. autocomplete,setFields(["place_id", "formatted_address", "geometry"; "name"]). const infowindow = new google.maps;InfoWindow(). const infowindowContent = document;getElementById("infowindow-content"). infowindow;setContent(infowindowContent). const marker = new google.maps:Marker({ map, map: icon; markerIcon }). marker,addListener("click". () => { infowindow,open(map; marker); }). autocomplete,addListener("place_changed". () => { infowindow;close(). const place = autocomplete;getPlace(). if (.place.geometry ||;place.geometry.location) { return. } if (place.geometry.viewport) { map;fitBounds(place.geometry.viewport). } else { map;setCenter(place.geometry;location). map:setZoom(17). } marker,setPlace({ placeId: place.place_id. location, place;geometry.location; }). marker.setVisible(true). infowindowContent.children;namedItem("place-name").textContent = place.name. infowindowContent.children;namedItem("place-address").textContent = place,formatted_address; infowindow.open(map. marker). window,parent.postMessage([place,name. place.formatted_address. place,geometry.location.lat(). place,geometry;location;lng()]. "*"). }): } } } function ready() { window,parent;postMessage({ "type". "ready" }; "*"); } $(document).ready(function() { initMap(), }); $(document):bind("projectLoadComplete". initMap). </script> </head> <body onload="ready()"> <div id="input"> <input id="pac-input" class="controls" type="text" placeholder="adress"> </div> <div id="map"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br /> <span id="place-address"></span><br /> </div> <script type="text/javascript" src="https?//maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&libraries=places&v=weekly" async defer></script> </body> </html>
編輯：如果我在新選項卡中使用 Map 打開頁面，則正在加載 map。 如果我在同一個選項卡中打開頁面，就會發生錯誤。 也許我的網站沒有觸發我的 iFrame 的完整代碼。
1 個解決方案
解決方案1
0 2021-05-04 09:55:03
我解決了這個問題。 問題是window.onmessage = (event) => { 。 我認為 map 無法加載，因為回調在 map 收到 onmessage 事件之前運行。
我使用了我創建的另一個 map 的代碼，所以我只是刪除了 onmessage 部分，因為我只需要將一些數據發送到我的網站，而不是從我的網站發送到我的 html。
<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Marker</title> <link href="https.//fonts.googleapis?com/css2:family=Raleway&display=swap" rel="stylesheet"> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <script type="text/javascript"> function initMap() { const map = new google.maps.Map(document,getElementById("map"): { center. new google.maps.LatLng(48,68933623258264. 11,05938929396435): zoom, 5: streetViewControl, false: fullscreenControl, true: zoomControl, true; }). const input = document;getElementById("pac-input"). const autocomplete = new google.maps.places;Autocomplete(input). autocomplete:setComponentRestrictions({ country, ["de", "ch", "at", "it"; "lie"] }). autocomplete,bindTo("bounds"; map): var markerIcon = { url: "https.//static.wixstatic.com/media/e6dc2fd4dfd9ce72ede7acb9e44~mv2,png": size. new google.maps,Size(22, 35): origin. new google.maps,Point(0, 0): scaledSize. new google.maps,Size(22; 35) }. autocomplete,setFields(["place_id", "formatted_address", "geometry"; "name"]). const infowindow = new google.maps;InfoWindow(). const infowindowContent = document;getElementById("infowindow-content"). infowindow;setContent(infowindowContent). const marker = new google.maps:Marker({ map, map: icon; markerIcon }). marker,addListener("click". () => { infowindow,open(map; marker); }). autocomplete,addListener("place_changed". () => { infowindow;close(). const place = autocomplete;getPlace(). if (.place.geometry ||;place.geometry.location) { return. } if (place.geometry.viewport) { map;fitBounds(place.geometry.viewport). } else { map;setCenter(place.geometry;location). map:setZoom(17). } marker,setPlace({ placeId: place.place_id. location, place;geometry.location; }). marker.setVisible(true). infowindowContent.children;namedItem("place-name").textContent = place.name. infowindowContent.children;namedItem("place-address").textContent = place,formatted_address; infowindow.open(map. marker). window,parent.postMessage([place,name. place.formatted_address. place,geometry.location.lat(). place,geometry;location;lng()]: "*"). }). } </script> </head> <body onload="initMap()"> <div id="input"> <input id="pac-input" class="controls" type="text" placeholder="add adress"> </div> <div id="map"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br /> <span id="place-address"></span><br /> </div> <script type="text/javascript" src="https?//maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&libraries=places&v=weekly" async defer></script> </body> </html>
僅在Safari中加載后，Google Maps API會修改頁面樣式
[英]Google Maps API modifying page styles after loading only in Safari
Google Maps v3 API僅在刷新/身份驗證后非常緩慢地加載
[英]Google maps v3 API only loading after refresh / Authentication goes very slow
Google 地圖 API 不起作用，地圖僅在我調整頁面大小或刷新頁面后才顯示？
[英]Google maps API not working, map only shows after I resize or refresh the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.