Google Maps V3 - заполнить текстовое поле данными маркера?

Question

Я пытаюсь заполнить текстовые поля lng, lat, где находится маркер.У меня это работало в v2, и я пытаюсь перейти на v3 - с трудом.Вот мой код:

Код карты:

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();



function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    myListener = google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng); google.maps.event.removeListener(myListener);

  });



  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag === true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
  }



  function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map,
      draggable: true


  });

  map.setCenter(location);

}
}

Вот код, который я (пытаюсь) использовать для заполнения текстовых полей:

var markerPosition = marker.getPosition();
var markerLatitude = markerPosition.lat();
var markerLongitute = markerPosition.lng();

 var lat = markerPosition.lat(), lng = markerPosition.lng();
document.getElementById("t1").value=lat;
document.getElementById("t2").value=lng;

Answer 1

Ну, просто есть функция для заполнения входов в функции placeMarker: Пример ссылки

Я также отметил, что вы включаете dragging для своего маркера, поэтому я добавил прослушиватель событий перетаскивания, чтобы соответствующим образом заполнить входы (внутри функции placeMarker).

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    map.setCenter(location);
    var markerPosition = marker.getPosition();
    populateInputs(markerPosition);
    google.maps.event.addListener(marker, "drag", function (mEvent) {
        populateInputs(mEvent.latLng);
    });
}
function populateInputs(pos) {
    document.getElementById("t1").value=pos.lat()
    document.getElementById("t2").value=pos.lng();
}

Answer 2

Спасибо, это рабочее решение.

function load () {
var url = 'phpsqlajax_genxml2.php?query=1' + params;
downloadUrl(url, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
    var ThisMarker = markers[i];
    var point = new google.maps.LatLng(
        parseFloat(ThisMarker.getAttribute("lat")),
        parseFloat(ThisMarker.getAttribute("lng"))
    );
    var mtype = ThisMarker.getAttribute("type");
    var icon = customIcons[mtype] || {};
    var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        clickable: true
    });
    bindInfoWindow(marker, map, infoWindow, ThisMarker);
}
});

}
function bindInfoWindow(marker, map, infoWindow, ThisMarker) {
var InfoText = ThisMarker.getAttribute("InfoText");
var colid = ThisMarker.getAttribute("colid");
var driver = ThisMarker.getAttribute("driver");
var vehicle_reg = ThisMarker.getAttribute("vehicle");
var mtype = ThisMarker.getAttribute("type");

if(mtype == 'col' || mtype == 'del') {
    google.maps.event.addListener(marker, 'dblclick', function() {
        document.getElementById("collivery_id").value = colid;
        document.getElementById("command").value = mtype;
    });
}
if(mtype == 'bike' || mtype == 'car' || mtype == 'bakkie' || mtype == 'truck') {
    google.maps.event.addListener(marker, 'dblclick', function() {
        document.getElementById("driver").value = driver;
        document.getElementById("vehicle").value = vehicle_reg;
    });
}

google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.setContent(InfoText);
    infoWindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map, marker);
});
}

Answer 3

Переменная marker не входит в глобальную область и доступна только в локальной области для placeMarker().Попробуйте переместить объявление var в начало сценария:

var initialLocation;
var marker = null;
var siberia = new google.maps.LatLng(60, 105);

//...

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

    map.setCenter(location);
}

Тогда вы сможете получить значения с помощью этого:

var markerPosition = marker.getPosition();
document.getElementById("t1").value=markerPosition.lat()
document.getElementById("t2").value=markerPosition.lng();