谷歌地图V3 - 用标记数据填充文本字段？ [英] google maps V3 - populate text field with marker data?

问题描述

我试图用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（）; 
 
 
 
函数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） ; 
 
}）; 
 
 
 
 //尝试W3C地理定位（首选）
 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）; 
}）; 
 //尝试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）; 
}）; 
 //浏览器不支持地理位置
}其他{
 browserSupportFlag = false; 
 handleNoGeolocation（browserSupportFlag）; 
 
 
函数handleNoGeolocation（errorFlag）{
 if（errorFlag === true）{
 alert（Geolocation service failed。）; 
 initialLocation = newyork; 
} else {
 alert（您的浏览器不支持地理定位，我们已将您置于西伯利亚。）; 
 initialLocation = siberia; 
 
 
 
 
 
函数placeMarker（location）{
 var marker = new google.maps.Marker（{
位置：位置，
地图：地图，
可拖曳：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; 
  
 
 
解决方案
好的，只需要一个函数来填充输入 placeMarker 函数：示例链接 
 
 
 
我还注意到，您在标记上启用拖动，所以我添加了一个拖动事件侦听器来相应地填充输入在 placeMarker 函数中）。 
 函数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）; 
}）; 
} 
函数populateInputs（pos）{
 document.getElementById（t1）。value = pos.lat（）
 document.getElementById（t2）。value = pos.lng（）; 
} 
  
 
I am trying to populate text fields with the lng, lat where a marker is placed.  I had this working in v2 and I'm trying to upgrade to v3 - having a hard time.  Here's my code:

Map code:
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);

}
}
Here's the code I'm (trying) to use to populate the text fields:
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;

解决方案
Well, just have a function to populate the inputs within the placeMarker function: Example Link  

I've also noted that you are enabling dragging on your marker so I've added a drag event listener to populate the inputs accordingly (inside the placeMarker function).  
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();
}


                        
这篇关于谷歌地图V3  - 用标记数据填充文本字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！