2013-06-20 6 views
8

Bir XML'im var, bu bir XSLT aracılığıyla HTML'ye dönüştürülüyor. XML, JavaScript içerebiliyor ve bunu diğer birçok sayfada olduğu gibi HTML'ye doğru bir şekilde çeviriyor. Sadece GoogleMaps ile çalışmıyor ve şüpheliyim, JavaScript'im bir yerlerde hatalı.InvalidStateError: "Temel olmayan bir Google Map öğretici örneğinde kullanılamayan bir nesnenin kullanılması denemesi yapıldı."

Elde edilen HTML'nin ilgili bölümleri aşağıda yayınlanmış gibi görünüyor.

Scripts/HTML neler oluyor:

  • API googleapis.com
  • Kimlik map_canvas olan bir div oluşturulduktan yüklenir.
  • <body onload="start();"> aracılığıyla başlatılan bir işlev başlat() tanımlanmıştır.
  • Bu işlevde, bir map_canvas değişkeni oluşturulur ve map_canvas adlı div nesnesine başvurusu iletilir.
  • Bu adımın çalışıp çalışmadığını kontrol etmek için div'e yeni arka plan kırmızı renk verdim.
  • Çalışıyor.
  • Sonraki, var_options değişkenini oluşturmak ve merkez, yakınlaştırma ve mapTypeId için başlangıç ​​ değerlerini ayarlamak istiyorum.
  • Bu adımın çalışıp çalışmadığını kontrol etmek için, div'e yeni arka plan mavi rengini veriyorum.
  • Bu işe yaramıyor, kırmızı renkte kalıyor.
  • Bu nedenle, bu komut yürütülemedi.
  • Nesneye google.maps erişip erişemediğimi kontrol ediyorum.
  • Eğer öyleyse, div'e yeni arka plan rengini yeşil veririm.
  • Bu, bu nesneye erişebilmem için çalışıyor.
  • Çapraz onay: API'yi yükleyen deyimi açıklarsam, rengi değişmez.

Bana göre, bu aşağıdaki gibi bir yerde hatalı görünüyor.

var map_options = { 
     center: new google.maps.LatLng(44.54, -78.54), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

Ancak birkaç saat sonra hala ne olduğunu anlayamıyorum.

<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> 
+1

Konsolda ne tür bir hata var? – Bergi

+1

Kod, sensörün doğru ya da yanlış olması gerektiği konusunda bana hata verdi. Biraz test ettim ve googleapis url'nizi '

11

Bu hatanın en yaygın nedeninin yalnızca geçersiz bir img src olduğunu buluyorum.

+0

Benim durumumdaydı. +1. –

3

Benim hatası (Bu yazı bulundu neden olan) benzer bir şeydi, ama yalnızca Internet Explorer (sürüm 11) 'de:

: Ben işaretleyici olarak svg-resim kullanıldı, çünkü bu neden oldu

File: eval code (401), Line: 39, Column: 304 

var marker = map.addMarker({ 
    lat: position.coords.latitude, 
    lng: position.coords.longitude, 
    icon : { 
     url : '/images/marker.svg' 
    } 
}); 

SDG yerine görüntülere geçiş yapmak sorunumu çözdü!

+1

SVG'nize yükseklik ve genişlik eklemeye çalışın. Daha fazla bilgi için bakın: http://stackoverflow.com/questions/23923607/custom-markers-in-google-maps-not-showing-up-in-firefox#answer-24280941 – Promo

+0

Teşekkürler @Promo, tam olarak ne oldu İhtiyacım vardı. Bana sorarsan yorumunuz ayrı bir cevap olabilir. – marcvangend

+0

@Promo Bağlantım için teşekkürler, sorunumu çözdüm – user301441

İlgili konular