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

헨리 케 바르 셀 로스

Google Maps 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();

    });

}

여기에 이미지 설명 입력

조이 슨

대신에

// 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();

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

2 개의 지리적 포인트와 좌표를 좌표로 직사각형 그리드를 얻는 방법

분류에서Dev

2 개의 지리적 포인트와 좌표를 좌표로 직사각형 그리드를 얻는 방법

분류에서Dev

react-google-maps를 사용하여 React.JS에서 Polygon의 좌표를 가져 오는 방법

분류에서Dev

같은 페이지에 두 개의 gmaps4rail을 표시하는 방법 하나는 일반지도, 하나는 스트리트 뷰 (Google Maps and Rails)에 표시됩니다.

분류에서Dev

하나의 div에 스크롤러를 추가하는 방법, 항상 2 개의 div가 표시됨

분류에서Dev

JasperReports의 표 바닥 글에서 텍스트 필드를 통해 데이터를 표시하는 방법

분류에서Dev

jtable에서 텍스트의 일부를 표시하는 방법

분류에서Dev

Swift : 두 개의 func 텍스트 필드를 동시에 사용하는 방법

분류에서Dev

Google지도를 사용하여 장소의 좌표를 얻는 방법 javascript API

분류에서Dev

이 체크 박스 체크 기능의 결과를 텍스트 필드에 표시하는 방법

분류에서Dev

입력 필드의 값에 따라 span 태그에 텍스트를 표시하는 방법

분류에서Dev

2 개의 텍스트 상자를 하나의 속성에 바인딩하는 방법은 무엇입니까?

분류에서Dev

두 개의 열에 2 개의 텍스트를 인쇄하는 방법

분류에서Dev

Google Maps API 3 : NaN 위도 좌표를 배열에 저장하는 동안?

분류에서Dev

ggplot2의 좌표 극 그래프에서 레이블의 텍스트를 왼쪽으로 정렬하는 방법은 무엇입니까?

분류에서Dev

HTML 코드의 다른 부분이나 다른 텍스트 영역의 텍스트 영역에 텍스트를 표시하는 방법

분류에서Dev

두 개의 버튼을 클릭 한 후 Textview에 두 개의 다른 텍스트를 표시하는 방법

분류에서Dev

Java에서 Google API를 사용하여 두 좌표 세트에서 방향을 얻는 방법

분류에서Dev

하나의 Google지도에서 Flutter의 여러 폴리 라인 세트를 표시하는 방법

분류에서Dev

Google Maps API-미국에서 임의의 좌표 생성

분류에서Dev

마우스 C #의 연속 좌표를 표시하는 레이블을 만드는 방법

분류에서Dev

2 개의 구성 요소에 2 개의 분리 된 토스터를 표시하는 방법

분류에서Dev

텍스트 영역의 텍스트 끝에 줄임표 (...)를 표시하는 방법은 무엇입니까?

분류에서Dev

텍스트 상자의 채팅 메시지를 div에 표시하는 방법

분류에서Dev

텍스트 영역 내에서 선택한 텍스트의 화면 좌표를 얻는 방법

분류에서Dev

API를 사용하여 SolidWorks에서 개체의 좌표 데이터를 얻는 방법

분류에서Dev

두 텍스트 필드의 값을 합산하고 결과를 세 번째 텍스트 파일에 표시하는 방법은 무엇입니까?

분류에서Dev

Google Maps Android API v2에서 2 개 이상의 위치에 대해 CameraUpdate를 수행하는 방법은 무엇입니까?

분류에서Dev

텍스트 줄임표를 사용하여 2 개의 텍스트를 같은 줄에 표시

Related 관련 기사

  1. 1

    2 개의 지리적 포인트와 좌표를 좌표로 직사각형 그리드를 얻는 방법

  2. 2

    2 개의 지리적 포인트와 좌표를 좌표로 직사각형 그리드를 얻는 방법

  3. 3

    react-google-maps를 사용하여 React.JS에서 Polygon의 좌표를 가져 오는 방법

  4. 4

    같은 페이지에 두 개의 gmaps4rail을 표시하는 방법 하나는 일반지도, 하나는 스트리트 뷰 (Google Maps and Rails)에 표시됩니다.

  5. 5

    하나의 div에 스크롤러를 추가하는 방법, 항상 2 개의 div가 표시됨

  6. 6

    JasperReports의 표 바닥 글에서 텍스트 필드를 통해 데이터를 표시하는 방법

  7. 7

    jtable에서 텍스트의 일부를 표시하는 방법

  8. 8

    Swift : 두 개의 func 텍스트 필드를 동시에 사용하는 방법

  9. 9

    Google지도를 사용하여 장소의 좌표를 얻는 방법 javascript API

  10. 10

    이 체크 박스 체크 기능의 결과를 텍스트 필드에 표시하는 방법

  11. 11

    입력 필드의 값에 따라 span 태그에 텍스트를 표시하는 방법

  12. 12

    2 개의 텍스트 상자를 하나의 속성에 바인딩하는 방법은 무엇입니까?

  13. 13

    두 개의 열에 2 개의 텍스트를 인쇄하는 방법

  14. 14

    Google Maps API 3 : NaN 위도 좌표를 배열에 저장하는 동안?

  15. 15

    ggplot2의 좌표 극 그래프에서 레이블의 텍스트를 왼쪽으로 정렬하는 방법은 무엇입니까?

  16. 16

    HTML 코드의 다른 부분이나 다른 텍스트 영역의 텍스트 영역에 텍스트를 표시하는 방법

  17. 17

    두 개의 버튼을 클릭 한 후 Textview에 두 개의 다른 텍스트를 표시하는 방법

  18. 18

    Java에서 Google API를 사용하여 두 좌표 세트에서 방향을 얻는 방법

  19. 19

    하나의 Google지도에서 Flutter의 여러 폴리 라인 세트를 표시하는 방법

  20. 20

    Google Maps API-미국에서 임의의 좌표 생성

  21. 21

    마우스 C #의 연속 좌표를 표시하는 레이블을 만드는 방법

  22. 22

    2 개의 구성 요소에 2 개의 분리 된 토스터를 표시하는 방법

  23. 23

    텍스트 영역의 텍스트 끝에 줄임표 (...)를 표시하는 방법은 무엇입니까?

  24. 24

    텍스트 상자의 채팅 메시지를 div에 표시하는 방법

  25. 25

    텍스트 영역 내에서 선택한 텍스트의 화면 좌표를 얻는 방법

  26. 26

    API를 사용하여 SolidWorks에서 개체의 좌표 데이터를 얻는 방법

  27. 27

    두 텍스트 필드의 값을 합산하고 결과를 세 번째 텍스트 파일에 표시하는 방법은 무엇입니까?

  28. 28

    Google Maps Android API v2에서 2 개 이상의 위치에 대해 CameraUpdate를 수행하는 방법은 무엇입니까?

  29. 29

    텍스트 줄임표를 사용하여 2 개의 텍스트를 같은 줄에 표시

뜨겁다태그

보관