谷歌地图API v3：如何将用户输入的坐标转换为经纬度？

Question

谷歌地图API v3：如何将用户输入的坐标转换为经纬度？

javascripthtmlgoogle-mapsgoogle-maps-api-3maps

4

我对Google Maps还不熟悉。我试图将用户输入的坐标转换为我的地图上标记的移动位置。例如，如果用户输入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>

- user626511

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KJYe.Name · Accepted Answer

这是JSFiddle演示: 更新:

出现问题的原因是你在initialize函数范围内有一个变量marker，因此moveMarker无法访问var marker。因此，我将标记移到全局范围内，通过在所有函数外部声明它来使moveMarker能够访问并移动标记的位置。这样做的话，你需要放弃初始化函数内部的var声明。

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

请注意，修改后的代码仅会移动标记的位置，并不会根据标记中心地图。您需要调用map.setCenter();来居中地图。

您需要分别解析出数字并使用parseFloat()设置为数字类型。 google.maps.LatLng()需要两个数字参数作为纬度和经度。更好的方法是创建两个文本字段。

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

一个用于纬度（lat），另一个用于经度（lng），并使用以下代码检索值：

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