javascript Google Maps API v3：将用户输入坐标转换为 latlng？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5368928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API v3: Turning user input coordinates to latlng?
提问by Yos Riady
I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function:
我是 Google 地图的新手。我正在尝试转动用户输入的坐标以将我在地图上的标记移动到这些坐标。例如，如果用户输入 50.75, 74.1，则标记将平移到该坐标。不幸的是，我无法让它工作。这是我的功能：
function moveMarker() {
var Markerloc = document.getElementById("Markerloc").value;
var newLatlng = new google.maps.LatLng(Markerloc);
marker.setPosition(newLatLng)
}
Here's my HTML code:
这是我的 HTML 代码：
<input type="text" id= "Markerloc" value="Paste your coordinates" />
<input type="button" onclick="moveMarker()" value="Update Marker">
EDIT: I thought that'd fix it, but somehow, it still doesn't work.
编辑：我认为这会解决它，但不知何故，它仍然不起作用。
Here's my code:
这是我的代码：
<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>
回答by u476945
Here is the JSFiddle Demo:
UPDATE:
更新：
The reason it wasn't working is because you have variable marker within the scope of initialize function and thus, moveMarker was not able to access the var marker. So, i went ahead and move the marker to the global scope by declaring it outside of all functions, and that way moveMarker can access and move the location of the marker. By doing so you'll have to drop the vardeclaration for the marker inside of initialization function.
它不起作用的原因是因为您在 initialize 函数的范围内有变量标记，因此， moveMarker 无法访问var marker. 所以，我继续通过在所有函数之外声明它来将标记移动到全局范围，这样 moveMarker 可以访问和移动标记的位置。通过这样做，您必须删除var初始化函数中标记的声明。
marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
Keep in mind the modified code would only move the marker's position but would not center the map based on the marker. You'll have to call map.setCenter();to center the map.
请记住，修改后的代码只会移动标记的位置，而不会根据标记将地图居中。你必须打电话map.setCenter();让地图居中。
You need to parse out the numbers seperately and set it to type Number using parseFloat(). google.maps.LatLng()takes two Number parameters for Lat and Lng. A better way of doing this is to create two textfields.
您需要单独解析数字并将其设置为使用parseFloat(). google.maps.LatLng()为 Lat 和 Lng 使用两个 Number 参数。一个更好的方法是创建两个文本字段。
<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />
One for lat and another for lng, and retrive the value with
一个用于 lat，另一个用于 lng，并使用
var lat = parseFloat(document.getElementById('markerLat').value);
and
和
var lng = parseFloat(document.getElementById('markerLng').value);
You can create and set the marker by doing
您可以通过执行创建和设置标记
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);
