谷歌地图标记在文本框中显示的位置，而不是div标签 [英] Google map marker to show location in textbox rather than div tag
本文介绍了谷歌地图标记在文本框中显示的位置，而不是div标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前在地图标记被拖动div标签显示的位置，但我想它显示在文本框中不是在股利。 我希望它诠释文本框txtLoc。目前，它显示了在格即，味精。也是我的信息窗口不显示。
＆LT; ASP：文本框ID =txtLoc的CssClass =表格控
=服务器的风格=保证金左：120像素＆GT;＆LT; / ASP：文本框＆GT;＆安培; NBSP;
＆LT;按钮ID =lblFind=服务器级=BTN BTN-信息BTN-XS＆GT;
查找地图＆LT位置; /按钮＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT; DIV ID ='味精'＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =地图的风格=高度：300像素; WIDTH：600px的＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT; VAR地理codeR;
功能initMap（）{
地理codeR =新google.maps.Geo codeR（）;
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（showPosition，showError）;
}其他{
X =的document.getElementById（味精）;
x.innerHTML =地理位置是此浏览器不支持。
} 功能showError（错误）{
X =的document.getElementById（味精）;
开关（误差。code）{
案例error.PERMISSION_DENIED：
x.innerHTML =用户拒绝地理位置的要求。
打破;
案例error.POSITION_UNAVAILABLE：
x.innerHTML =找不到位置信息。
打破;
案例error.TIMEOUT：
x.innerHTML =获取用户位置的请求超时。
打破;
案例error.UNKNOWN_ERROR：
x.innerHTML =发生未知错误。
打破;
}
} } 功能地理codePosition（POS）{
X =的document.getElementById（味精）;
地理coder.geo code（{'的latLng'：POS}，功能（结果状态）{
如果（状态== google.maps.Geo coderStatus.OK）{
如果（结果[0]）{
x.innerHTML =结果[0] .formatted_address; }
}其他{
x.innerHTML =地理codeR非不可能性;
}
}）; } 功能showPosition（位置）{
纬度= position.coords.latitude;
LON = position.coords.longitude;
latlon =新google.maps.LatLng（纬度，经度）
mapholder =的document.getElementById（地图） VAR myOptions = {
中心：latlon，
变焦：14，
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
MapTypeControl中：假的，
navigationControlOptions：
{风格：google.maps.NavigationControlStyle.SMALL}
} VAR contentString ='拖动红色标记＆LT; BR /＆GT;改善地理位置;
VAR信息窗口=新google.maps.InfoWindow（{
内容：contentString
}）;
infowindow.open（地图，标记）; VAR地图=新google.maps.Map（的document.getElementById（地图），myOptions）;
VAR的标记=新google.maps.Marker（{
位置：latlon，
地图：地图，
标题：报告是指这个位置'，
可拖动：真
}）;
google.maps.event.addListener（标记'的dragstart'，函数（EVT）{
X =的document.getElementById（味精）;
}）; google.maps.event.addListener（标记，'拖'，函数（EVT）{
X =的document.getElementById（味精）;
}）; google.maps.event.addListener（标记'dragend'，函数（EVT）{
X =的document.getElementById（味精）;
地理codePosition（marker.getPosition（））;
}）;}
解决方案
这是code。与文本框（也）为展会的反向地理code结果的工作版本
看地缘codePosition（函数addAddress（）这不再是必要的）
＆LT;身体GT;
！＆LT; - DIV ID =地图的风格=宽度：1800px;高度：1300px＆GT;＆LT; / DIV - ＆GT;
＆LT;输入ID =txtLoc类型=文本名称=测试名的风格=宽度：400像素;＆GT;＆LT; BR＆GT;
＆LT; DIV ID ='味精'＆GT;测试与LT; / DIV＆GT;
＆LT; DIV ID =地图＆GT;＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; VAR地理codeR; 功能initMap（）{
地理codeR =新google.maps.Geo codeR（）;
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（showPosition，showError）;
}其他{
X =的document.getElementById（味精）;
x.innerHTML =地理位置是此浏览器不支持。
} 功能showError（错误）{
X =的document.getElementById（味精）;
开关（误差。code）{
案例error.PERMISSION_DENIED：
x.innerHTML =用户拒绝地理位置的要求。
打破;
案例error.POSITION_UNAVAILABLE：
x.innerHTML =找不到位置信息。
打破;
案例error.TIMEOUT：
x.innerHTML =获取用户位置的请求超时。
打破;
案例error.UNKNOWN_ERROR：
x.innerHTML =发生未知错误。
打破;
}
} // updateMarkerPosition（latlon）;
//地理codePosition（latlon）;
} 功能地理codePosition（POS）{
X =的document.getElementById（味精）;
地理coder.geo code（{'的latLng'：POS}，功能（结果状态）{
如果（状态== google.maps.Geo coderStatus.OK）{
如果（结果[0]）{
x.innerHTML =结果[0] .formatted_address;
Y =的document.getElementById（txtLoc）;
y.value =结果[0] .formatted_address;
}
}其他{
x.innerHTML =地理codeR非不可能性;
}
}）; } 功能showPosition（位置）{
纬度= position.coords.latitude;
LON = position.coords.longitude;
latlon =新google.maps.LatLng（纬度，经度）
mapholder =的document.getElementById（地图） VAR myOptions = {
中心：latlon，
变焦：14，
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
MapTypeControl中：假的，
navigationControlOptions：
{风格：google.maps.NavigationControlStyle.SMALL}
} VAR contentString ='拖动红色标记＆LT; BR /＆GT;改善地理位置;
VAR信息窗口=新google.maps.InfoWindow（{
内容：contentString
}）;
infowindow.open（地图，标记）; VAR地图=新google.maps.Map（的document.getElementById（地图），myOptions）;
VAR的标记=新google.maps.Marker（{
位置：latlon，
地图：地图，
标题：报告是指这个位置'，
可拖动：真
}）;
//添加拖拽事件侦听器。
google.maps.event.addListener（标记'的dragstart'，函数（EVT）{
X =的document.getElementById（味精）;
x.innerHTML ='＆LT; P＆GT;拖动......标记下降：当前纬度：'+ evt.latLng.lat（）+'目前的液化天然气：'+ evt.latLng.lng（）+'＆LT; / P＆GT;' ;
}）; google.maps.event.addListener（标记，'拖'，函数（EVT）{
X =的document.getElementById（味精）;
x.innerHTML ='＆LT; P＆GT;拖动......再次....标记位置：当前纬度：'+ evt.latLng.lat（）+'目前的液化天然气：'+ evt.latLng.lng（）+'＆LT ; / p＆GT;';
}）; google.maps.event.addListener（标记'dragend'，函数（EVT）{
X =的document.getElementById（味精）;
x.innerHTML ='＆LT; P＆GT; ..拖动结束...标记下降：当前纬度：'+ evt.latLng.lat（）+'目前的液化天然气：'+ evt.latLng.lng（）+'＆LT; / p＆GT;';
地理codePosition（marker.getPosition（））;
}）; }
＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =https://maps.googleapis.com/maps/api/js?callback=initMap
异步延迟＆GT;
＆LT; / SCRIPT＆GT; ＆LT; /身体GT;
Currently when the map marker is dragged the position is shown in the div tag but I want to show it in the textbox not in the div. I want it int textbox txtLoc. It shows currently in div ie., 'msg'. Also my infowindow is not showing.
<asp:TextBox ID="txtLoc" CssClass="form-control"
runat="server" style="margin-left:120px" ></asp:TextBox>
<button ID="lblFind" runat="server" class="btn btn-info btn-xs">
Find location on map</button>
<br/><br />
<div id='msg'></div>
<div id="map" style="height:300px;width:600px"></div>
</div>
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x=document.getElementById("msg");
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showError(error) {
x=document.getElementById("msg");
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
}
function geocodePosition(pos) {
x=document.getElementById("msg");
geocoder.geocode({'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
x.innerHTML = results[0].formatted_address;
}
} else {
x.innerHTML = "Geocoder non possibile";
}
});
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('map')
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions:
{ style: google.maps.NavigationControlStyle.SMALL }
}
var contentString = 'Drag red marker <br/> to improve geo-location';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: 'Report refers to this location',
draggable: true
});
google.maps.event.addListener(marker, 'dragstart', function (evt) {
x=document.getElementById("msg");
});
google.maps.event.addListener(marker, 'drag', function (evt) {
x=document.getElementById("msg");
});
google.maps.event.addListener(marker, 'dragend', function (evt) {
x=document.getElementById("msg");
geocodePosition(marker.getPosition());
});
}
解决方案
This is a working version of the code with text box (also) for show the reverse geocode result look at the new version of geocodePosition (the function addAddress() It is no longer necessary)
<body >
<!-- div id="map" style="width: 1800px; height: 1300px"></div-->
<input id="txtLoc" type="text" name="testname" style="width: 400px;"><br>
<div id='msg'>Test</div>
<div id="map"></div>
<script type="text/javascript">
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x=document.getElementById("msg");
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showError(error) {
x=document.getElementById("msg");
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
//updateMarkerPosition(latlon);
//geocodePosition(latlon);
}
function geocodePosition(pos) {
x=document.getElementById("msg");
geocoder.geocode({'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
x.innerHTML = results[0].formatted_address;
y = document.getElementById("txtLoc");
y.value = results[0].formatted_address;
}
} else {
x.innerHTML = "Geocoder non possibile";
}
});
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('map')
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions:
{ style: google.maps.NavigationControlStyle.SMALL }
}
var contentString = 'Drag red marker <br/> to improve geo-location';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: 'Report refers to this location',
draggable: true
});
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Dragging ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
});
google.maps.event.addListener(marker, 'drag', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Dragging ... again .... Marker position: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
});
google.maps.event.addListener(marker, 'dragend', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Drag .. ended ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
geocodePosition(marker.getPosition());
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer>
</script>
</body>
这篇关于谷歌地图标记在文本框中显示的位置，而不是div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
