IT-Swarm.Net

InvalidValueError: není instancí HTMLInputElement

FYI, nejsem JavaScript Ninja, ale cítil jsem, jako bych se stal jedním, když jsem dělal spoustu věcí na základě Map Google v poslední době.

Implementoval jsem mapu. Uživatel může vyhledávat místa Google a umístit na ně značku. je tam textové pole. Nebo uživatel může kliknout na mapu, aby umístil značku na místo, které hledá nebo přetáhněte značku.

Kód zůstává stejný. Design se změnil. ID a název vstupního pole také stejný. Žádná změna kódu JS. Ale tato věc nefunguje.

Zde je webová stránka

Mapa Google způsobuje chybu.

 InvalidValueError: not an instance of HTMLInputElement

Pokusil jsem se o řešení dané zde Ale chyba stále přetrvává.

Co by to mohlo být?

Zde je kód:

        var map;
        var marker;
        var latLngC;

        function initialize() 
        {
            latLngC = new google.maps.LatLng(14.5800, 121.0000);
            var mapOptions = {
        center: latLngC,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

            map = new google.maps.Map(document.getElementById('source_map'),
        mapOptions);

        var marker = new google.maps.Marker({
                position: latLngC,
                map: map,
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (x) 
            {
            document.getElementById('src_lat').value = x.latLng.lat();
            document.getElementById('src_long').value = x.latLng.lng();
            document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
                var geocoder = new google.maps.Geocoder;
                var infowindow = new google.maps.InfoWindow;                
            geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
            }); 

            //Get coordinates,address Upon clicking a location in map (Source Map)
            //By Sajeev
            google.maps.event.addListener(map, 'click', function(x) 
            {
            document.getElementById('src_lat').value = x.latLng.lat();
            document.getElementById('src_long').value = x.latLng.lng();
            document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
                var geocoder = new google.maps.Geocoder;
                var infowindow = new google.maps.InfoWindow;                
            geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
            });

        //Add marker upon clicking on map
            //google.maps.event.addDomListener(map, 'click', addMarker);
            google.maps.event.addDomListener(map, 'click', function() { addMarker(map); }); 



        var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
        google.maps.event.addListener(places1, 'place_changed', function () {
            var place1 = places1.getPlace();

            var src_addr = place1.formatted_address;
            var src_lat = place1.geometry.location.lat();
            var src_long = place1.geometry.location.lng();

            var mesg1 = "Address: " + src_addr;
            mesg1 += "\nLatitude: " + src_lat;
            mesg1 += "\nLongitude: " + src_long;
            //alert(mesg1);

                 document.getElementById('src_lat').value = src_lat;
            document.getElementById('src_long').value = src_long;
            document.getElementById('pickup_location').innerHTML = src_lat+' , '+src_long;                 
        });
        //Add marker upon place change
        //google.maps.event.addDomListener(places1, 'place_changed', addMarker);            
            google.maps.event.addDomListener(places1, 'place_changed', function() { addMarker(map); }); 

        }
        google.maps.event.addDomListener(window,'resize',initialize);
        google.maps.event.addDomListener(window, 'load', initialize); 

Můj kód HTML vypadá takto:

   <form role="form" id="frm_source" name="frm_source" method="POST" action="index_action.php">

        <div class="form-group">
            <label for="source_point"><h2>Pickup Address</h2></label>
            <textarea type="text" id="source_point" name="source_point"  class="form-control" placeholder="Enter your pick up address here"></textarea>
        </div>

        <div class="form-group">
            <label for="pickup_location"><h3>GPS Cordinates</h3></label>
            <hr>
            <p id="pickup_location"></p>
        </div>

        <div class="form-group">
            <input type="hidden" id="src_lat" name="src_lat" placeholder="latitude" >
            <input type="hidden" id="src_long" name="src_long" placeholder="longitude" >
        </div>

    <input type="submit" name="submit" id="submit" class="btn btn-primary" value="Next to enter destination address" />
    </form>

Google Map

<div id="source_map"></div>
21
Sajeev C

Vaše pole je TEXTAREA a z posledních aktualizací podporuje automatické doplňování map Google pouze window.HTMLInputElement (INPUT tag)

:-(

42
jb4

To byl můj problém, když sleduji výuku na Googlu. Problém je v tom, že po načtení stránky byste měli spustit JavaScript, můžete volat funkci v parametru GET při volání skriptu Google Map:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places$callback=YourFunctionHere"></script>

YourFunctionHere je funkce zpětného volání, což znamená, že bude spuštěna pouze po načtení stránky.

Nebo můžete zavést funkce po načtení stránky. Příklad: window.onload = Yourfunction();

Uvnitř této funkce je místo, kde byste měli provádět své API služby Mapy Google, jako je document.getElementById('source_map') a všechny metody, které patří do třídy google.

7
707

Toto je problém DOM. Vaše načítání javascriptu před načtením HTML dokumentu.

Ujistěte se, že se vaše prvky html načítají nejdříve a pak se načte pouze javascript.

Jako

a pak

6

Měl jsem stejný problém v Angular2. Moje řešení je přesunout inicializaci aplikace Mapy Google do funkce, která se spustí, když se uživatel soustředí do pole input automatického doplňování. Není to nejkrásnější řešení, ale funguje to.

Kód: 

private autocomplete_init: boolean: false;

autocompleteFocus() {
 this.autocomplete_init = true;
 if (!this.autocomplete_init) {
  this._autocomplete = new google.maps.places.Autocomplete(document.getElementById("search_address"), {
  componentRestrictions: {'country': 'dk'}
  }
}

HTML:

<input placeholder="Search" type="text" id="search_address" (focus)="autocompleteFocus()" autofocus>
3
Vingtoft

Před několika dny jsem čelil stejnému problému, ale našel jsem řešení, pokud má někdo zájem :) Není to dokonalé, je to velmi složité, ale dělá to 95% práce! Vím, že je to velmi staré téma, ale jestli to může někomu zachránit ...

Cílem je přidat vlastní textarea a navázat původní hodnotu vstupního textu na textarea (s klávesou, klávesou, klávesou, změnou událostí).

$('.MyInput').on('keyup keydown keypress change', function() {
  $('myTextarea').val($(this).val());
  emptyPlaceholder($(this), 'Myplaceholder text');
});

function emptyPlaceholder(input, placeholder) {
     // The placeholder of the textarea will hide if the input has a value
     if (input.val().length) {
         $('#triggerInput').attr('placeholder', '');
     } else {
         $('#triggerInput').attr('placeholder', placeholder);
     }
 }

Přidat nějaké css "skrýt" původní vstup. Skryje to, co píšete ve vstupu, pak uvidíte pouze to, co je napsáno v textarea (Důležité: index z-vstupu musí být lepší než textarea!)

.MyInput {
   color: transparent;
   background-color: transparent; 
}

Není to zdaleka dokonalé a jsem otevřený, když má někdo lepší řešení!

1
KCarnaille

Pro úhlové

Inicializoval jsem autocomplete v ngOnInit(), kvůli kterému jsem dostal chybu. Jednoduše jsem přesunul inicializaci na ngAfterViewInit() a všechno fungovalo dobře.

Kód:

  ngAfterViewInit(): void {
    this.autocomplete = new google.maps.places.Autocomplete(
      (this._document.getElementById('input')),
      { types: ['geocode'] }
    );
  }
0
Anand Undavia

.pac-container { z-index: 1051! }

0
swapnil kambe