Google Maps API v3：將用戶輸入座標轉換爲latlng？

我是新的谷歌地圖。我正在嘗試打開用戶輸入的座標，將我在地圖上的標記移動到這些座標。例如，如果用戶輸入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>

來源

2011-03-20 Yos Riady

這裏是JSFiddle Demo:

UPDATE：

它不工作的原因是因爲你初始化功能，因此範圍內具有可變標記，moveMarker無法訪問var marker。所以，我繼續前進，通過在全部函數之外聲明它將標記移動到全局範圍，這樣moveMarker就可以訪問和移動標記的位置。通過這樣做，您必須在初始化函數中刪除標記的var聲明。

marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    draggable: true 
});

請記住，修改的代碼只會移動標記的位置，但不會基於標記居中映射。您必須致電map.setCenter();才能將地圖居中。

您需要單獨解析出數字並將其設置爲使用parseFloat()鍵入Number。對於Lat和Lng，google.maps.LatLng()需要兩個Number參數。更好的方法是創建兩個文本框。

<input type='text' id='markerLat' value='' /> 
<input type='text' id='markerLng' value='' />

一個用於lat和另一個用於液化天然氣，並retrive與

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);

設置標記

來源

2011-03-20 14:11:07 kjy112

Google Maps API v3：將用戶輸入座標轉換爲latlng？

回答

相關問題