8
Mam XML, który jest przekształcany na HTML za pomocą XSLT. XML może zawierać JavaScript i poprawnie tłumaczy to na HTML, tak jak to robię na wielu innych stronach. To po prostu nie działa z GoogleMaps i podejrzewam, że mój JavaScript jest gdzieś wadliwy.InvalidStateError: "Podjęto próbę użycia obiektu, który nie jest lub nie jest już użyteczny" w podstawowym przykładzie samouczka Map Google.
Odpowiednie sekcje wynikowego HTML wyglądają jak zamieszczone poniżej.
Co się dzieje w HTML/w skryptach
- API jest ładowany z googleapis.com
- div z map_canvas ID jest tworzony.
- Funkcja start() jest zdefiniowana, która jest uruchamiana przez
<body onload="start();">
. - W tej funkcji tworzona jest zmienna map_canvas, która przekazuje referencję do obiektu div o nazwie map_canvas.
- Aby kontrolować, że ten krok zadziałał, nadaję działce nowe tło kolor czerwony.
- To działa.
- Następnie chciałbym utworzyć zmienną var_options i ustawić początkowe wartości dla środka, zoom i mapTypeId.
- Aby kontrolować, że ten krok zadziałał, podaję tło nowego koloru koloru niebieskiego.
- To nie działa, pozostaje czerwone.
- Dlatego ta instrukcja nie została wykonana.
- Sprawdzam więc, czy mogę w ogóle uzyskać dostęp do obiektu
google.maps
. - jeśli tak, podaję div nowy kolor tła zielony.
- To działa, więc mogę uzyskać dostęp do tego obiektu.
- Kontrola krzyżowa: jeśli skomentuję instrukcję ładującą interfejs API, kolor nie ulegnie zmianie.
Dla mnie wygląda na to, że gdzieś jest wadliwy.
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Ale po kilku godzinach wciąż nie wiem, co to jest.
<html>
<head>
...
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
function start()
{
var map_canvas = document.getElementById('map_canvas');
// If the element can be located, we make it green. Checked.
// If we give the function another name than start, it won't be executed. Checked.
map_canvas.style.backgroundColor = 'green';
if(typeof google.maps != 'undefined') {
// If the google.maps object exists, we make the canvas red. Checked.
// If the API was not loaded from googleapis (commented out), it will stay green.
map_canvas.style.backgroundColor = 'red';
}
// So why does the following not work?
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Not arriving here:
map_canvas.style.backgroundColor = 'blue';
// Before going on, I want to solve above problem, so this is commented out.
// var map = new google.maps.Map(map_canvas, map_options);
// map_canvas.style.backgroundColor = 'black';
}
</script>
</head>
<body onload="start();">
...
<div style="width: 400px; height: 224px;" id="map_canvas"></div>
...
</body>
</html>
Jaki błąd pojawia się w konsoli? – Bergi
Kod dał mi błąd, że czujnik musi być prawdziwy lub fałszywy. Przetestowałem trochę i zmieniłem adres URL googleapis na '
Uważam, że najczęstszą przyczyną tego błędu jest po prostu nieprawidłowa img src.
Źródło
2013-11-03 01:28:20
To było w moim przypadku. +1. –
Mój błąd było coś podobnego (dlatego uważam, że ten post), ale tylko w przeglądarce Internet Explorer (wersja 11):
Było to spowodowane tym, że użyłem SVG obrazów jako markery:
Przejście do obrazów PNG zamiast SVG rozwiązało mój problem!
Źródło
2014-10-28 13:55:40 Wietse
Spróbuj dodać wysokość i szerokość do SVG. Zobacz więcej informacji: http://stackoverflow.com/questions/23923607/custom-markers-in-google-maps-not-showing-up-in-firefox#answer-24280941 – Promo
Dzięki @Promo, to było dokładnie to, Potrzebowałem. Twój komentarz może być oddzielną odpowiedzią, jeśli mnie zapytasz. – marcvangend
@Promo dzięki za link rozwiązał mój problem – user301441