Google Maps API v3：将用户输入坐标转换为 latlng？答案

【问题标题】：Google Maps API v3: Turning user input coordinates to latlng?Google Maps API v3：将用户输入坐标转换为 latlng？
【发布时间】：2011-03-20 14:02:56
【问题描述】：

我是 Google 地图的新手。我正在尝试将用户输入的坐标转换为将我在地图上的标记移动到这些坐标。例如，如果用户输入 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>

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 maps

【解决方案1】：

这里是JSFiddle Demo:

更新：

它不起作用的原因是因为您在初始化函数的范围内有变量标记，因此 moveMarker 无法访问var marker。所以，我继续通过在所有函数之外声明它来将标记移动到全局范围，这样 moveMarker 可以访问和移动标记的位置。通过这样做，您必须删除初始化函数内部标记的 var 声明。

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

请记住，修改后的代码只会移动标记的位置，但不会基于标记使地图居中。您必须致电map.setCenter(); 才能使地图居中。

您需要单独解析出数字并使用parseFloat() 将其设置为数字类型。 google.maps.LatLng() 为 Lat 和 Lng 采用两个 Number 参数。更好的方法是创建两个文本字段。

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

【讨论】：