Question

我有一个红色标记和一个文本字段，您可以在其中查看Google地图上的坐标。但只有当您点击谷歌地图卡时才能看到坐标。但是如何在谷歌地图卡上拖动标记时看到坐标？例如，您将标记拖动到纽约的位置 - 如何查看纽约的坐标。现在只有在纽约点击鼠标时才能看到坐标。我有这样的脚本：

function initMap() {    
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 52.001321, lng: 4.374577 },
        mapTypeControl: false


    });

    var coordsDiv = document.getElementById('coords');

    map.addListener('click', function(event) {
        coordsDiv.textContent =
            'lat: ' + event.latLng.lat().toFixed(6) + ', ' +
            'lng: ' + event.latLng.lng().toFixed(6);

        map.clearOverlays()
    });   



    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function () {
        geocodeAddress(geocoder, map);
    });    
}

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }


}



function geocodeAddress(geocoder, resultsMap) {
    //var lat = homeMarker.getPosition().lat();
    //var lng = homeMarker.getPosition().lng();
    //console(lat);

    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: 52.068077, lng: 4.422684 },          //results[0].geometry.location,
                title: "Drag me!"

                //coordsDiv: marker.getPosition()
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

谢谢

我现在就这样：

function initMap() {    
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: 52.001321, lng: 4.374577 },
        mapTypeControl: false


    });

    var coordsDiv = document.getElementById('coords');

    map.addListener('click', function(event) {
        coordsDiv.textContent =
            'lat: ' + event.latLng.lat().toFixed(6) + ', ' +
            'lng: ' + event.latLng.lng().toFixed(6);

        map.clearOverlays()
    });   



    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function () {
        geocodeAddress(geocoder, map);
    });    
}//end function initMap

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }


}

google.maps.event.addListener(marker, 'dragend', function (event) {
    var yourLat = this.getPosition().lat();
    var yourLon = this.getPosition().lng();
});



function geocodeAddress(geocoder, resultsMap) {


    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "Drag me!"


                //coordsDiv: marker.getPosition()
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

    var infowindow = new google.maps.InfoWindow({
        content: '<p>Marker Location:' + marker.getPosition() + '</p>'
    });
}

google.maps.event.addDomListener(window,'load',initMap);

我尝试点击标记，然后你必须看到一个带坐标的弹出窗口。但那不起作用。我这样试试：

function geocodeAddress(geocoder, resultsMap) {


    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "Drag me!"


                //coordsDiv: marker.getPosition()
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

    var infowindow = new google.maps.InfoWindow({
        content: '<p>Marker Location:' + marker.getPosition() + '</p>'
    });

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

我现在就这样：

function geocodeAddress(geocoder, resultsMap) {


    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "Drag me!"


                //coordsDiv: marker.getPosition()
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
        var infowindow = new google.maps.InfoWindow({
            content: '<p>Marker Location:' + marker.getPosition() + '</p>'
        });

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

            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("address").value = this.getPosition().lat();
                document.getElementById("address").value = this.getPosition().lng();
            });
        });


    });


}

但是如果你搜索一个地方，那么你会在那个地方看到红色标记，但坐标没有被更新。只有当您单击标记时，您才会看到坐标。

Answer 1

尝试dragend事件监听器

google.maps.event.addListener(marker, 'dragend', function (event) {
  document.getElementById("latbox").value = this.getPosition().lat();
  document.getElementById("lngbox").value = this.getPosition().lng();
});

在谷歌地图中使用getPosition

1 个答案: