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函数中的输入：Example Link

我还注意到您在标记上启用了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

变量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();

Answer 3

谢谢，这是可行的解决方案。

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

谷歌地图V3 - 用标记数据填充文本字段？

3 个答案: