2015-03-16 1 views
-1

Я хочу передать адрес перетаскиваемого маркером Google в поле и затем отправить его в столбец базы данных mysql. Я нашел код ниже, который именно то, что я хочу, но я хочу поместить результат «Ближайший адрес соответствия» в поле ввода. Как я могу это сделать ?Как передать адрес перетаскиваемого маркера карты Google в поле ввода?

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var geocoder = new google.maps.Geocoder(); 

function geocodePosition(pos) { 
geocoder.geocode({ 
latLng: pos 
}, function(responses) { 
if (responses && responses.length > 0) { 
    updateMarkerAddress(responses[0].formatted_address); 
} else { 
    updateMarkerAddress('Cannot determine address at this location.'); 
} 
}); 
} 

function updateMarkerStatus(str) { 
document.getElementById('markerStatus').innerHTML = str; 
} 

function updateMarkerPosition(latLng) { 
document.getElementById('info').innerHTML = [ 
latLng.lat(), 
latLng.lng() 
].join(', '); 
} 

function updateMarkerAddress(str) { 
document.getElementById('address').innerHTML = str; 
} 

function initialize() { 
var latLng = new google.maps.LatLng(-34.397, 150.644); 
var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
zoom: 8, 
center: latLng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var marker = new google.maps.Marker({ 
position: latLng, 
title: 'Point A', 
map: map, 
draggable: true 
}); 

// Update current position info. 
updateMarkerPosition(latLng); 
geocodePosition(latLng); 

// Add dragging event listeners. 
google.maps.event.addListener(marker, 'dragstart', function() { 
updateMarkerAddress('Dragging...'); 
}); 

google.maps.event.addListener(marker, 'drag', function() { 
updateMarkerStatus('Dragging...'); 
updateMarkerPosition(marker.getPosition()); 
}); 

google.maps.event.addListener(marker, 'dragend', function() { 
updateMarkerStatus('Drag ended'); 
geocodePosition(marker.getPosition()); 
}); 
} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<style> 
#mapCanvas {width: 500px;height: 400px;float: left;} 
#infoPanel {float: left;margin-left: 10px;} 
#infoPanel div {margin-bottom: 5px;} 
</style> 

<div id="mapCanvas"></div> 
<div id="infoPanel"> 
<b>Marker status:</b> 
<div id="markerStatus"><i>Click and drag the marker.</i></div> 
<b>Current position:</b> 
<div id="info"></div> 
<b>Closest matching address:</b> 
<div id="address"></div> 
</div> 
</body> 
</html> 
+0

здесь является ответом на подобного рода [вопрос] [1] [1]: HTTP: //stackoverflow.com/a/12829342/1578908 –

ответ

0

Изменение:

<div id="address"></div> 

function updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 

To:

<input id="address" /> 

function updateMarkerAddress(str) { 
    document.getElementById('address').value = str; 
} 
Смежные вопросы