Próbuję użyć Google MAP API v3 z następującym kodem.
<h2>Topology</h2>
<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />
<style type="text/css" >
#map_canvas {
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
</script>
<div id="map_canvas"> </div>
Kiedy uruchamiam ten kod, przeglądarka to mówi.
Uncaught TypeError: Nie można odczytać właściwości „offsetWidth” o wartości null
Nie mam pojęcia, ponieważ kieruję się wskazówkami podanymi w tym samouczku .
Czy masz jakieś wskazówki?
źródło
W przypadku innych, którzy mogą nadal występować ten problem , nawet po wypróbowaniu powyższych zaleceń, użycie niepoprawnego selektora dla obszaru roboczego mapy w funkcji inicjalizacji może spowodować ten sam problem, ponieważ funkcja próbuje uzyskać dostęp do czegoś, co nie istnieje. Sprawdź dokładnie, czy identyfikator mapy pasuje do funkcji inicjalizacji, a kod HTML lub ten sam błąd może zostać zgłoszony.
Innymi słowy, upewnij się, że Twoje identyfikatory są zgodne. ;)
źródło
Ten błąd można również uzyskać, jeśli nie zostanie określony
center
lubzoom
w opcjach mapy.źródło
Google używa
id="map_canvas"
iwid="map-canvas"
przykładach dwukrotnie sprawdź i ponownie sprawdź identyfikator: Dźródło
Rok, odpowiedź geocodezip jest poprawna. Więc zmień kod w ten sposób: (jeśli nadal masz kłopoty, a może ktoś w przyszłości)
źródło
Właśnie dlatego dodaję mój scenariusz niepowodzenia, aby to zadziałało. Miałem taki,
<div id="map>
w którym ładowałem mapę:div był początkowo ukryty i nie miał wyraźnie ustawionych wartości szerokości i wysokości, więc jego rozmiar był
width x 0
. Kiedyś ustawiłem rozmiar tego div w CSS w ten sposóbwszystko działało! Mam nadzieję, że to komuś pomoże.
źródło
Dla jeszcze większej liczby innych osób, które wciąż mogą mieć ten problem, użyłem
<div id="map1" />
tagu samozamykającego , a drugi div nie wyświetlał się i nie wyglądał, jakby był w domenie. jak tylko zmieniłem go na dwa tagi „otwórz i zamknij”<div id="map1"></div>
, zadziałało. hthźródło
Uważaj również, aby nie pisać
poprawny:
źródło
Miałem w sobie pojedyncze cytaty
i zastąpiłem je podwójnymi cudzysłowami
To załatwiło sprawę.
źródło
Zmiana identyfikatora (we wszystkich 3 miejscach) z „map-canvas” na „map” naprawiła go, mimo że upewniłem się, że identyfikatory są takie same, div ma szerokość i wysokość, a kod nie jest działający do czasu po wczytaniu okna. To nie jest kreska; wydaje się, że nie działa z żadnym innym identyfikatorem niż „mapa”.
źródło
Upewnij się również, że nie umieszczasz symbolu skrótu (#) wewnątrz selektora w
komunikat. To nie jest jQuery. Szybkie przypomnienie dla kogoś, kto się spieszy.
źródło
Miałem ten sam problem, ale problem polegał na tym, że powiększenie nie zostało zdefiniowane w obiekcie opcji przekazanym Mapom Google.
źródło
Jeśli tworzysz wiele map w pętli, jeśli pojedynczy element DOM mapy nie istnieje, powoduje to uszkodzenie wszystkich z nich. Najpierw sprawdź, czy element DOM istnieje, zanim utworzysz nowy obiekt Map.
źródło
Jeśli używasz formularzy internetowych asp.net i rejestrujesz skrypt w kodzie strony za pomocą strony wzorcowej, nie zapomnij użyć identyfikatora klienta elementu mapy (vb.net):
źródło
Aby go rozwiązać, musisz dodać
async defer
do skryptu.Powinno to wyglądać tak:
Zobacz tutaj znaczenie async defer.
Ponieważ będziesz wywoływał funkcję z głównego pliku js, musisz także upewnić się, że jest ona następująca po tym, w którym ładujesz główny skrypt.
źródło
Upewnij się, że dołączasz
&libraries=places
parametr biblioteki miejsc podczas pierwszego ładowania interfejsu API.Na przykład:
źródło
Wiem, że jestem trochę spóźniony na imprezę, chciałem tylko dodać, że błąd może również wystąpić, gdy div nie istnieje na stronie. Możesz także sprawdzić, czy div istnieje najpierw przed załadowaniem wywołania funkcji Google Maps. Coś jak
źródło
I w kontrolerze
użyj $ scope.init = function () {...} zamiast google.maps.event.addDomListener (okno, „load”, init) {...}
Mam nadzieję, że to ci pomoże.
źródło
Naprawdę najłatwiejszym sposobem na rozwiązanie tego problemu jest po prostu przeniesienie obiektu, zanim kod JavaScript zadziałał. Chyba w twojej odpowiedzi obiekt jest ładowany po kodzie javascript.
źródło
W moim przypadku tego rodzaju problemy zostały rozwiązane za pomocą
defer
https://developer.mozilla.org/en/docs/Web/HTML/Element/script<script src="<your file>.js" defer></script>
Musisz jednak wziąć pod uwagę obsługę tej opcji przez przeglądarki (nie widziałem problemów)
źródło
Sprawdź, czy nie zastępujesz
window.self
Mój problem: stworzyłem komponent i napisałem
self = this
zamiast varself = this
. Jeśli nie użyjesz słowa kluczowegovar
, JS umieści tę zmienną na obiekcie okna, więc nadpisałem,window.self
co spowodowało ten błąd.źródło
To jest edycja wcześniej usuniętego postu, która zawiera treść połączonej odpowiedzi w samej odpowiedzi. Celem ponownego opublikowania tej odpowiedzi jest funkcjonowanie jako PSA dla użytkowników React 0.9+, którzy również natknęli się na ten problem.
oryginalny edytowany post
Ten błąd również wystąpił podczas korzystania z ReactJS podczas śledzenia tego postu na blogu . Komentarz sahat tutaj pomógł - zobacz treść komentarza sahat poniżej.
źródło
Moja porażka polegała na użyciu
jako opcję, a nie właściwą opcję
źródło
dodaj odłożenie asynchroniczne na początku wywołania klawisza interfejsu API mapy.
źródło
W przypadku, z którym miałem do czynienia, div mapy został warunkowo renderowany w zależności od tego, czy lokalizacja została podana do wiadomości publicznej. Jeśli nie masz pewności, czy div płótna mapy będzie na stronie, po prostu sprawdź, czy
document.getElementById
zwraca element, i wywołaj mapę tylko wtedy, gdy jest obecna:źródło
Tutaj problemem był link API bez
key
parametrów:W ten sposób działa dobrze.
źródło