如何在一个文本字段中显示 2 个坐标（Google 地图 API）？

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

可以使用classgoogle.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位小数。

如何在一个文本字段中显示 2 个坐标（Google 地图 API）？

How to display 2 coordinates in one textfield (Google Maps API)?

javascript

google-maps-api-3

google-maps-markers