L'API Google Maps v3: le Tournant de l'utilisateur d'entrée de coordonnées à latlng?

Je suis nouveau avec Google Maps.
Je suis en train de tourner coordonne les entrées de l'utilisateur pour déplacer un marqueur que j'ai sur ma carte à ces coordonnées. Par exemple, si les entrées de l'utilisateur 50.75, 74.1 le marqueur pan à coordonner. Malheureusement, je ne pouvais pas le faire fonctionner. Voici ma fonction:

function moveMarker() {
  var Markerloc = document.getElementById("Markerloc").value;
  var newLatlng = new google.maps.LatLng(Markerloc);
  marker.setPosition(newLatLng)
}

Voici mon code HTML:

<input type="text" id= "Markerloc" value="Paste your coordinates" /> 
<input type="button" onclick="moveMarker()" value="Update Marker">

EDIT: j'ai pensé que j'avais de le réparer, mais de toute façon, cela ne fonctionne toujours pas.

Voici mon 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>

OriginalL'auteur Yos Riady | 2011-03-20

  1. 5

    Ici est la JSFiddle Démo:

    Mise à JOUR:

    La raison pour laquelle il n'était pas le travail, c'est parce que vous avez variable marqueur dans le champ d'application de la fonction d'initialisation et donc, moveMarker n'était pas en mesure d'accéder à la var marker. Donc, je suis allé de l'avant et de se déplacer le marqueur de la portée mondiale en la déclarant en dehors de toutes les fonctions, et de cette façon moveMarker pouvez l'accès et déplacer la position du marqueur. En faisant ainsi, vous aurez à déposer les var déclaration pour le marqueur à l'intérieur de la fonction d'initialisation.

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

    Garder à l'esprit le code modifié serait seulement déplacer le marqueur de position, mais pas de centre de la carte basée sur le marqueur. Vous aurez à appeler map.setCenter(); au centre de la carte.

    Vous avez besoin d'analyser les chiffres séparément et réglez le type de Numéro à l'aide parseFloat(). google.cartes.LatLng() prend deux paramètres de numéros de la Lat et de Gnl. Une meilleure façon de faire cela est de créer deux objets textfield. 

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

    Un pour la lat et l'autre pour le gnl, et retrive la valeur avec 

    var lat = parseFloat(document.getElementById('markerLat').value);

    et 

    var lng = parseFloat(document.getElementById('markerLng').value);

    Vous pouvez créer et définir le marqueur en faisant 

    var newLatLng = new google.maps.LatLng(lat, lng); 
marker.setPosition(newLatLng);

    OriginalL'auteur KJYe.Name