InvalidValueError: 不是 HTMLInputElement 的实例 [英] InvalidValueError: not an instance of HTMLInputElement
问题描述
仅供参考，我不是一个 JavaScript 忍者，但我觉得我最近基于谷歌地图做了很多事情时我会成为一个忍者.
我实现了一张地图.用户可以搜索谷歌地点并为其放置标记.有一个文本框.或者用户可以点击地图将标记放置到他正在寻找的地方或拖动标记.
代码保持不变.设计改变了.输入字段的 id 和 name 也相同.没有更改 JS 代码.但是这东西行不通.
这是网站
Google 地图产生错误.
InvalidValueError: 不是 HTMLInputElement 的实例我在这里尝试了解决方案但错误仍然存在.
可能的原因是什么?
代码如下:
var map;var 标记；var latLngC;函数初始化(){latLngC = 新的 google.maps.LatLng(14.5800, 121.0000);var mapOptions = {中心:latLngC，缩放:12，mapTypeId: google.maps.MapTypeId.ROADMAP,};map = new google.maps.Map(document.getElementById('source_map'),地图选项);var 标记 = 新的 google.maps.Marker({位置:latLngC，地图:地图，可拖动:真});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 = 新的 google.maps.Geocoder;var infowindow = 新的 google.maps.InfoWindow;geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');});//获取坐标，地址点击地图中的一个位置(源地图)//由萨杰夫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 = 新的 google.maps.Geocoder;var infowindow = 新的 google.maps.InfoWindow;geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');});//点击地图时添加标记//google.maps.event.addDomListener(map, 'click', addMarker);google.maps.event.addDomListener(map, 'click', function() { addMarker(map); });var place1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));google.maps.event.addListener(places1, 'place_changed', function () {var place1 = place1.getPlace();var src_addr = place1.formatted_address;var src_lat = place1.geometry.location.lat();var src_long = place1.geometry.location.lng();var mesg1 = "地址:" + src_addr;mesg1 += "
纬度:" + src_lat;mesg1 += "
经度:" + src_long;//警报(mesg1)；document.getElementById('src_lat').value = src_lat;document.getElementById('src_long').value = src_long;document.getElementById('pickup_location').innerHTML = src_lat+' , '+src_long;});//位置改变时添加标记//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 代码如下所示:
<div class="form-group"><label for="pickup_location"><h3>GPS坐标</h3></label><小时><p id="pickup_location"></p>
<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" >
<input type="submit" name="submit" id="submit" class="btn btn-primary" value="下一步输入目标地址"/></表单>
谷歌地图
你的字段是 TEXTAREA，从上次更新开始，谷歌地图自动完成现在只支持 window.HTMLInputElement (INPUT 标签).
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.
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.
Here's the website
Google map is producing an error.
InvalidValueError: not an instance of HTMLInputElement
I tried solution given here But 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 += "
Latitude: " + src_lat;
mesg1 += "
Longitude: " + 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:
<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>
Your field is TEXTAREA, and from last updates, google maps autocomplete now supports only window.HTMLInputElement (INPUT tag).
这篇关于InvalidValueError: 不是 HTMLInputElement 的实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
