Javascript InvalidValueError: 不是 HTMLInputElement 的实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34063439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
InvalidValueError: not an instance of HTMLInputElement
提问by Sajeev C
FYI, I'm not a JavaScript Ninja but felt like I'll become one when I did a lot of things based on Google Maps recently.
仅供参考，我不是 JavaScript 忍者，但我觉得当我最近基于谷歌地图做了很多事情时，我会成为一个忍者。
I implemented a map. User can search for google places and place a marker for it. there's a text box for that. Or user can click on the map to place a marker to the place he's looking for or drag the marker.
我实现了一个地图。用户可以搜索谷歌地点并为其放置标记。有一个文本框。或者用户可以单击地图以将标记放置到他正在寻找的地方或拖动标记。
Code remains the same. Design changed. Input field's id and name also same. No change to JS code. But this thing ain't working.
代码保持不变。设计改变了。输入字段的 id 和 name 也相同。JS 代码没有变化。但这东西行不通。
Here's the website
这是网站
Google map is producing an error.
谷歌地图产生错误。
InvalidValueError: not an instance of HTMLInputElement
I tried solution given hereBut error still remains.
我试过这里给出的解决方案 但错误仍然存在。
What could be the possible reason?
可能的原因是什么？
Here's the code:
这是代码：
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);
My HTML code looks like this:
我的 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>
Google Map
谷歌地图
<div id="source_map"></div>
回答by jb4
Your field is TEXTAREA, and from last updates, google maps autocomplete now supports only window.HTMLInputElement (INPUT tag)
您的字段是TEXTAREA，从上次更新开始，谷歌地图自动完成现在仅支持window.HTMLInputElement (INPUT tag)
:-(
:-(
回答by Prashant Kumar Mishra
This is an issue of DOM. Your javascript loads before loading your html document.
这是DOM的问题。您的 javascript 在加载您的 html 文档之前加载。
Make sure your html elements load first and then only load javascript.
确保您的 html 元素首先加载，然后只加载 javascript。
Like
喜欢
and then
进而
你的 JavaScript 代码回答by Dadan
This has been my problem while following the tutorial on Google.
The problem is that you should execute the javascript after the page loads, you can call the function on the GETparameter while calling the Google Map script:
这是我在 Google 上学习教程时遇到的问题。问题是你应该在页面加载后执行javascript，你可以GET在调用谷歌地图脚本的同时调用参数上的函数：
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places$callback=YourFunctionHere"></script>
YourFunctionHereis a callback function means it will only execute after the page loads.
YourFunctionHere是一个回调函数，意味着它只会在页面加载后执行。
Or you can can call functions after the page loads. Example: window.onload = Yourfunction();
或者您可以在页面加载后调用函数。例子：window.onload = Yourfunction();
Now, inside that function is where you would do your Google Maps API stuff like document.getElementById('source_map')and all methods that belong to the googleclass.
现在，在该函数中，您可以执行 Google Maps API 之类的内容document.getElementById('source_map')以及属于google该类的所有方法。
回答by Vingtoft
I had the same problem in Angular2. My solution is to move the initialisation of Google Maps to a function that fires when a user focus in the autocomplete inputfield. Not the most beautiful solution, but it works.
我在 Angular2 中遇到了同样的问题。我的解决方案是将 Google Maps 的初始化移动到当用户聚焦在自动完成input字段时触发的函数。不是最漂亮的解决方案，但它有效。
Code:
代码：
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:
HTML：
<input placeholder="Search" type="text" id="search_address" (focus)="autocompleteFocus()" autofocus>
回答by KCarnaille
I was facing the same issue some days ago, but I've found a solution, if someone is interested :) It's not perfect, it's verytricky, but it does 95% of the job ! I know it's a very old topic, but if it can save somebody...
几天前我遇到了同样的问题，但我找到了一个解决方案，如果有人感兴趣:) 它并不完美，非常棘手，但它完成了 95% 的工作！我知道这是一个非常古老的话题，但如果它可以拯救某人......
The idea is to add a custom textarea, and bind the original input text value to the textarea (with keyup, keypress, keydown, change events).
这个想法是添加一个自定义的textarea，并将原始输入文本值绑定到textarea（使用keyup，keypress，keydown，change事件）。
$('.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);
}
}
Add some css to " hide " the original input. It will hide what you're writing in the input, then you'll only see what is written in your textarea (Important: the z-index of the input has to be superior than textarea one !)
添加一些 css 以“隐藏”原始输入。它将隐藏您在输入中写入的内容，然后您将只能看到 textarea 中写入的内容（重要提示：输入的 z-index 必须高于 textarea 一！）
.MyInput {
color: transparent;
background-color: transparent;
}
It's far from being perfect, and I'm open if someone has a better solution !
它远非完美，如果有人有更好的解决方案，我很乐意！
回答by Anand Undavia
For Angular
对于角
I was initializing the autocompletein ngOnInit()because of which I was getting the error.
I simply moved the initialization to ngAfterViewInit()and everything worked fine.
我正在初始化autocompleteinngOnInit()因为我收到错误。我只是将初始化移动到ngAfterViewInit()，一切正常。
Code:
代码：
ngAfterViewInit(): void {
this.autocomplete = new google.maps.places.Autocomplete(
(this._document.getElementById('input')),
{ types: ['geocode'] }
);
}
回答by swapnil kambe
.pac-container { z-index: 1051 !important; }
.pac-container { z-index: 1051 !important; }
