4
Googleマップで新しくなった。 私はマップ上のマーカーをそれらの座標に移動するために座標入力をユーザー入力に変更しようとしています。例えば、ユーザが50.75,74.1を入力すると、マーカはその座標にパンする。残念ながら、私はそれを動作させることができませんでした。ここに私の関数があります：Google Maps API v3：ユーザー入力座標をlatlngに変更しますか？
function moveMarker() {
var Markerloc = document.getElementById("Markerloc").value;
var newLatlng = new google.maps.LatLng(Markerloc);
marker.setPosition(newLatLng)
}
ここに私のHTMLコードは次のとおりです。
<input type="text" id= "Markerloc" value="Paste your coordinates" />
<input type="button" onclick="moveMarker()" value="Update Marker">
編集：私はそれを修正しようと思いましたが、どういうわけか、それはまだ動作しません。ここで
は私のコードです：あなたは、このように初期化関数のスコープ内の変数マーカーを持っているので、それが働いていなかった理由がある
：ここ
<script type="text/javascript">
var map;
var zoomLevel;
function initialize(){
var myLatlng = new google.maps.LatLng(40.65, -74);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var zoomLevel = map.getZoom();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(myLatlng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener (map, 'zoom_changed', function() {
updateZoomLevel(map.getZoom());
});
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());
});
};
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 updateZoomLevel(zoomLevel){
document.getElementById('zoomLevel').innerHTML = zoomLevel;
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(myLatlng) {
document.getElementById('info').innerHTML = [
myLatlng.lat(),
myLatlng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function moveMarker() {
var lat = parseFloat(document.getElementById('markerLat').value);
var lng = parseFloat(document.getElementById('markerLng').value);
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
<b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div>
</div>
<input type='text' id='markerLat' value='Target Latitude' />
<input type='text' id='markerLng' value='Target Longitude' />
<input type="button" onclick="moveMarker()" value="Move Marker">
</body>
</html>