InvalidValueError：不是 HTMLInputElement 的实例（谷歌地图）答案

【问题标题】：InvalidValueError: not an instance of HTMLInputElement (Google maps)InvalidValueError：不是 HTMLInputElement 的实例（谷歌地图）
【发布时间】：2018-02-21 11:22:03
【问题描述】：

我正在尝试为谷歌地图位置创建一个简单的自动完成字段，但我收到以下错误消息 即使我的字段是 HtmlInputElement

InvalidValueError: 不是 HTMLInputElement 的实例

html:

<input type="text" id="input"/>
<div id="map" style="width: 200px; height: 200px;"></div>

js:

$(document).ready(function(){
    var map_input = $('#input');
    setTimeout(function(){initMap()},'5000');
    function initMap() {
        var map = new google.maps.Map($('form #map'), {
            center: {lat: 33.8892846, lng: 35.539302},
            zoom: 11
        });

        var autocomplete = new google.maps.places.Autocomplete(map_input);
        var marker = new google.maps.Marker({
            map: map
        });

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                //map.setCenter(place.geometry.location);
                //map.setZoom(17);  // Why 17? Because it looks good.
            }

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
        });
    }
});

check this jsfiddle

【问题讨论】：

标签： jquery google-maps google-places-api

【解决方案1】：

您的“输入元素”不是 HTMLInputElement 的实例。它是一个 JQuery 数组。这将起作用：

var map_input = $('#input')[0];

proof of concept fiddle

代码 sn-p：

$(document).ready(function(){
    var map_input = $('#input')[0];
    setTimeout(function(){initMap()},'5000');
    function initMap() {
        var map = new google.maps.Map($('form #map'), {
            center: {lat: 33.8892846, lng: 35.539302},
            zoom: 11
        });
        
        var autocomplete = new google.maps.places.Autocomplete(map_input);
        var marker = new google.maps.Marker({
            map: map
        });

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                //map.setCenter(place.geometry.location);
                //map.setZoom(17);  // Why 17? Because it looks good.
            }
            
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="text" id="input"/>
<div id="map" style="width: 200px; height: 200px;"></div>

【讨论】：

【解决方案2】：

您需要直接访问 DOM 元素而不是 jQuery 对象 - 例如将$('#map') 更改为$('#map')[0]。

【讨论】：