하나의 텍스트 필드 (Google Maps API)에 2 개의 좌표를 표시하는 방법은 무엇입니까?

Question

Google지도 API 문서에서이 솔루션을 사용하여 사용자에게 위치를 표시하도록했지만 위도와 경도가 각각있는 두 개의 입력을 표시합니다. 단일 입력으로 (-10.0000, 10.0000)과 같이 쉼표로 구분하여 입력하려면 어떻게합니까?

// global "map" variable 
    var map = null; 
    var marker = null; 

    // popup window for pin, if in use 
    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150,50) 
     }); 

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) { 

    var contentString = html; 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     }); 

    google.maps.event.trigger(marker, 'click');  
    return marker; 


} 


function initialize() { 

    // the location of the initial pin 
    var myLatlng = new google.maps.LatLng(-19.919131, -43.938637); 

    // create the map 
    var myOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeControl: true, 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 


    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 



    // establish the initial marker/pin 
    var image = 'https://2.bp.blogspot.com/-37LrWPYLhrw/V8ByzCkQP2I/AAAAAAAAACM/7hKqzoGlX98p5RcBz2Z9u7XwY2goDKsMgCLcB/s64/Marcador-BikeSpot.png'; 
    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     icon: image, 
     title:"Property Location" 
    }); 

    // establish the initial div form fields 
    formlat = document.getElementById("latbox").value = myLatlng.lat(); 
    formlng = document.getElementById("lngbox").value = myLatlng.lng(); 

    // close popup window 
    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
     }); 

    // removing old markers/pins 
    google.maps.event.addListener(map, 'click', function(event) { 
     //call function to create marker 
     if (marker) { 
      marker.setMap(null); 
      marker = null; 
     } 

     // Information for popup window if you so chose to have one 
     /* 
     marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng); 
     */ 

     var image = 'https://2.bp.blogspot.com/-37LrWPYLhrw/V8ByzCkQP2I/AAAAAAAAACM/7hKqzoGlX98p5RcBz2Z9u7XwY2goDKsMgCLcB/s64/Marcador-BikeSpot.png'; 
     var myLatLng = event.latLng ; 
     /* 
     var marker = new google.maps.Marker({ 
      by removing the 'var' subsquent pin placement removes the old pin icon 
     */ 
     marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title:"Bicicletario", 

     }); 



     // populate the form fields with lat & lng 
     formlat = document.getElementById("latbox").value = event.latLng.lat(); 
     formlng = document.getElementById("lngbox").value = event.latLng.lng(); 

    }); 

} 

Answer 1

대신

// populate the form fields with lat & lng 
     formlat = document.getElementById("latbox").value = event.latLng.lat(); 
     formlng = document.getElementById("lngbox").value = event.latLng.lng(); 

의 당신은

// populate the form fields with lat & lng 
    formlat = event.latLng.lat(); 
    formlng = event.latLng.lng(); 
    document.getElementById("latlngbox").value = formlat +","+formlng 

또는

// populate the form fields with lat & lng 
    formlat = event.latLng.lat(); 
    formlng = event.latLng.lng(); 
    document.getElementById("latlngbox").value = event.latLng.toUrlValue() 

을 사용할 수 있습니다

latlngbox라는 별도의 입력 상자를 만들거나 값을 기존 텍스트 상자 중 하나에 채우고 다른 텍스트 상자를 숨길 수 있습니다. 다음에 초기화 방법 변경 코드에서

는 :

// establish the initial div form fields 
    formlat = myLatlng.lat(); 
    formlng = myLatlng.lng(); 
    document.getElementById("latlngbox").value = myLatlng.toUrlValue(); 

Answer 2

당신은 클래스 google.maps.LatLng의 .toUrlValue() 방법을 사용할 수 있습니다.

참조 : https://developers.google.com/maps/documentation/javascript/reference#LatLng

예 :

var location = new google.maps.LatLng(-34.111, 151.12345); 
console.log(location.toUrlValue(/*precision=*/3)); 

출력 :

-34.111,151.123

JSFiddle

여기에서 precision은 표시하고자하는 소수점 이하 자릿수를 의미합니다. 기본적으로 소수 자릿수는 0입니다.