Question

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

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

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

1 个答案: