Question

我有这个代码，允许用户通过点击地图在Google地图中插入图钉。现在我试图使这个引脚可拖动，所以我只是在标记的初始化中添加了draggable:true,。但这不是用坐标更新字段。它仅在用户点击其他位置时才有效。我错过了什么？

  // 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 marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Property Location", 
    draggable:true,
    icon: {
        url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',

        // base image is 60x60 px
        size: new google.maps.Size(64, 96),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(32, 48), 
       // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(16, 48)
    }
});

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

    // 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://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.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",

    icon: {
        url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',

        // base image is 60x60 px
        size: new google.maps.Size(64, 96),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(32, 48), 

       // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(16, 48)

    }


        });

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

});
}


    });

}

带有我正在接收坐标的输入的HTML是：

<div id='map_canvas'/>

<input  id='LatLng-Input' size='20' type='text'/>

Answer 1

它没有更新坐标，因为你没有告诉它这样做。您必须添加 dragend-handler 并更新您的元素，在标记拖动完成时显示坐标：

marker.addListener('dragend', function(event){
    document.getElementById("LatLng-Input").value = event.latLng.lat() + ", " + event.latLng.lng();
});

如果您有信息窗口，则必须更新信息窗口的内容：

marker.addListener('dragend', function(event){
    infoWindow.setContent(event.latLng.lat() + ", " + event.latLng.lng());
});

如果您想在拖动时同时更新坐标，请使用'drag'而不是'dragend'添加另一个处理程序。

可拖动的图钉不会更新Google Maps API中的坐标

1 个答案: