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

我是新的谷歌地图。我正在尝试打开用户输入的坐标，将我在地图上的标记移动到这些坐标。例如，如果用户输入50.75,74.1，则标记将平移到该坐标。不幸的是，我无法让它工作。这里是我的功能：Google Maps API v3：将用户输入坐标转换为latlng？

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>

来源

2011-03-20 Yos Riady

这里是JSFiddle Demo:

UPDATE：

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

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

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

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

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

一个用于lat和另一个用于液化天然气，并retrive与

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

设置标记

来源

2011-03-20 14:11:07 kjy112

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

回答

相关问题