InvalidValueError:不是HTMLInputElement的实例

Question

仅供参考,我不是一个JavaScript忍者,但我觉得当我最近基于谷歌地图做了很多事情时我会变成一个.

我实施了一张地图.用户可以搜索谷歌地点并为其添加标记.有一个文本框.或者,用户可以单击地图将标记放置到他要查找的位置或拖动标记.

代码保持不变.设计改变了.输入字段的ID和名称也相同.没有改变JS代码.但是这件事没有用.

这是网站

谷歌地图正在产生错误.

 InvalidValueError: not an instance of HTMLInputElement

我试过这里给出的解决方案 但错误仍然存​​在.

可能的原因是什么？

这是代码:

        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代码如下所示:

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

谷歌地图

<div id="source_map"></div>

Answer 1

您的字段是TEXTAREA,从上次更新,谷歌地图自动完成现在仅支持window.HTMLInputElement (INPUT tag)

:-(

Answer 2

在按照Google上的教程进行操作时,这一直是我的问题.问题是你应该在页面加载后执行javascript,你可以GET在调用Google Map脚本时调用参数上的函数:

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

YourFunctionHere 是一个回调函数意味着它只会在页面加载后执行.

或者你可以在页面加载后调用函数.例:window.onload = Yourfunction();

现在,在该功能中,您可以使用Google Maps API document.getElementById('source_map')以及属于google该类的所有方法.

Answer 3

这是DOM的问题.在加载html文档之前加载了javascript.

确保首先加载html元素,然后只加载javascript.

喜欢

然后

你的javascript代码

Answer 4

我在 Angular2 中遇到了同样的问题。我的解决方案是将 Google Maps 的初始化移动到当用户聚焦在自动完成input字段时触发的函数。不是最漂亮的解决方案，但它有效。

代码：

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>