我是 Google map 的新手。 我正在尝试转换用户输入的坐标，以将我在 map 上的标记移动到这些坐标。例如，如果用户输入 50.75、74.1，标记将平移到该坐标。不幸的是，我无法让它工作。这是我的功能:
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>
最佳答案
更新:
它不工作的原因是因为您在初始化函数的范围内有变量标记，因此 moveMarker 无法访问 var 标记。因此，我继续通过在所有函数之外声明它来将标记移动到全局范围，这样 moveMarker 就可以访问和移动标记的位置。通过这样做，您必须删除初始化函数内标记的 var 声明。
marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
请记住，修改后的代码只会移动标记的位置，但不会根据标记使 map 居中。您必须调用 map.setCenter(); 使 map 居中。
您需要单独解析出数字并使用 parseFloat() 将其设置为类型 Number。 google.maps.LatLng() Lat 和 Lng 有两个 Number 参数。一个更好的方法是创建两个文本字段。
<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />
一个用于纬度，另一个用于经度，并用
检索值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);
关于javascript - 谷歌地图 API v3 : Turning user input coordinates to latlng?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5368928/