Question

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

    });

}

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

OR

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

您可以创建一个名为latlngbox的单独输入框，或将值填充到其中一个现有文本框中并隐藏另一个。

在initialize方法中将代码更改为以下内容：

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

Answer 2

您可以使用课程.toUrlValue()的{{1}}方法。

请参阅： https://developers.google.com/maps/documentation/javascript/reference#LatLng

示例：

google.maps.LatLng

<强>输出：

-34.111,151.123

JSFiddle

其中var location = new google.maps.LatLng(-34.111, 151.12345); console.log(location.toUrlValue(/*precision=*/3));只表示您要显示的小数位数。默认情况下，它是0位小数。

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

2 个答案: