it-swarm.dev

InvalidValueError: HTMLInputElement örneği değil

Bilginize, ben bir JavaScript Ninja değilim ama son zamanlarda Google Haritalar'a dayanarak çok şey yaptığımda bir tane olacağım gibi hissettim.

Bir harita uyguladım. Kullanıcı google yerleri arayabilir ve bunun için bir işaretçi yerleştirebilir. bunun için bir metin kutusu var. Veya kullanıcı aradığı yere bir işaretleyici yerleştirmek için haritayı tıklayabilir ya da işaretçiyi sürükleyebilir.

Kod aynı kalır. Tasarım değişti. Giriş alanının kimliği ve adı da aynı. JS kodunda değişiklik yok. Ama bu şey çalışmıyor.

İşte web sitesi

Google haritası bir hata üretiyor.

 InvalidValueError: not an instance of HTMLInputElement

here .__ 'da verilen çözümü denedim ama hata hala devam ediyor.

Muhtemel sebep ne olabilir?

İşte kod:

        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); 

HTML kodum şöyle görünüyor:

   <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 Harita

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

Alanınız TEXTAREA ve son güncellemelerden, google maps autocomplete artık yalnızca window.HTMLInputElement (INPUT tag) özelliğini destekliyor

:-(

42
jb4

Google'da öğreticiyi takip ederken bu benim sorunumdu .. Sorun, sayfa yüklendikten sonra javascript'i çalıştırmanız gerektiği, Google Harita komut dosyasını çağırırken GET parametresindeki işlevi çağırabilirsiniz:

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

YourFunctionHere bir geri çağırma işlevidir, yalnızca sayfa yüklendikten sonra yürütüleceği anlamına gelir.

Veya sayfa yüklendikten sonra işlevleri çağırabilirsiniz. Örnek: window.onload = Yourfunction();

Şimdi, bu işlevin içinde, Google Maps API’nizi document.getElementById('source_map') ve google sınıfına ait tüm yöntemler gibi şeyler yaparsınız.

7
707

Bu bir DOM sorunudur. Javascript html belgenizi yüklemeden önce yükler.

Html öğelerinizin önce yüklendiğinden ve sonra yalnızca javascript yüklediğinden emin olun.

Sevmek

ve sonra

6

Angular2'de de aynı problem vardı. Benim çözümüm, Google Maps’in başlatılmasını kullanıcı otomatik tamamlama input alanına odaklandığında başlatılan bir işleve taşımak. En güzel çözüm değil, ama işe yarıyor.

Kod: 

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

Birkaç gün önce aynı sorunla karşı karşıyaydım, ancak birisi ilgileniyorsa bir çözüm buldum :) Mükemmel değil, çok zor, ama işin% 95'ini yapıyor! Biliyorum bu çok eski bir konu, ama eğer birini kurtarabilirse ...

Buradaki fikir, özel bir textarea eklemek ve orijinal girdi metni değerini textareaya bağlamak (keyup, keypress, keydown, olayları değiştirmek).

$('.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);
     }
 }

Orijinal girişi "gizlemek" için bir miktar css ekleyin. Girdide yazdıklarınızı gizler, o zaman yalnızca yazı tablonuzda ne yazıldığını görürsünüz (Önemli: girişin z-dizini textarea olandan daha üstün olmalıdır!)

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

Mükemmel olmaktan çok uzak ve birisinin daha iyi bir çözümü varsa ben açığım!

1
KCarnaille

Açısal için

autocomplete işlevini ngOnInit() içinde başlattım, çünkü hata alıyorum . Ben sadece başlatmayı ngAfterViewInit() 'a taşıdım ve her şey yolunda gitti.

Kod:

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

.pac-container { z-index: 1051 önemli; }

0
swapnil kambe