Google Maps API v3: превратить пользовательские координаты ввода в латыш? - PullRequest
Новая
       12

Google Maps API v3: превратить пользовательские координаты ввода в латыш?

4 голосов
/ 20 марта 2011

Я новичок в 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>

1 Ответ

5 голосов
/ 20 марта 2011

Вот демоверсия JSFiddle:

UPDATE:

Причина, по которой это не сработало, заключается в том, что у вас есть переменный маркер в области действия функции инициализации и, следовательно, moveMarker не смог получить доступ к var marker. Итак, я пошел дальше и переместил маркер в глобальную область видимости, объявив его вне всех функций, и таким образом moveMarker может получить доступ и переместить местоположение маркера. При этом вам нужно будет удалить объявление var для маркера внутри функции инициализации. 

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

Имейте в виду, что измененный код будет только перемещать положение маркера, но не будет центрировать карту на основе маркера. Вам придется позвонить map.setCenter();, чтобы центрировать карту.

Вам нужно отдельно разобрать числа и установить для них тип Number с помощью parseFloat(). google.maps.LatLng () принимает два параметра Number для Lat и Lng. Лучший способ сделать это - создать два текстовых поля. 

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