Question

I have a form with two input text for latitude and longitude.
If I drag and drop the marker on Google Map API, the values in the input will change.
If I click on the map, it will change too.

However, after this click event, the drag and drop animation and behavior is good but my event is never trigger, so the values do not change at all.

I found only one thread about 'drag and click conflicts' nevertheless any solution.

So, this is my code:

    function launchMap(latitude, longitude, markerMap, zoom) {
        mapLaunch = true;
        var marker, map, latlng, image= '../Images/eolienne_marker_white.png', title = 'Site';
        function initMap() {
            var latlngOk = true;
            if (latitude === null || latitude === 'undefined' || latitude == 'null') {
                latlngOk = false;
            }
            if (longitude === null || longitude === 'undefined' || latitude == 'null') {
                latlngOk = false;
            }
            if (latlngOk === true) {
                latlng = new google.maps.LatLng(latitude, longitude);
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    center: latlng,
                    zoom: zoom,
                    draggable: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                if (markerMap === true) {
                    marker = new google.maps.Marker({
                        position: latlng,
                        icon: image,
                        map: map,
                        draggable: true,
                        title: title
                    });
                }
            }
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
            google.maps.event.addListener(map, 'click', function (event) {
                if (markerMap === true) {
                    marker.setMap(null);
                }
                markerMap = true;
                marker = new google.maps.Marker({
                    position: event.latLng,
                    icon: image,
                    map: map,
                    draggable: true,
                    title: title
                });
                map.panTo(event.latLng);
                document.getElementById('lat').value = event.latLng.lat();
                document.getElementById('lng').value = event.latLng.lng();
            });
            google.maps.event.addListener(marker, 'drag', function (event) {
                document.getElementById('lat').value = event.latLng.lat();
                document.getElementById('lng').value = event.latLng.lng();
            });
        }
        google.maps.event.addDomListener(window, "load", initMap);
    }

Thanks for the help.

EDIT: The solution is to add the drag event to each marker creating. In my code above there is one place where I create a marker without adding the Listener. You can see below the new code working great.

function launchMap(latitude, longitude, markerMap, zoom) {
        mapLaunch = true;
        var marker, map, latlng, image= '../Images/eolienne_marker_white.png', title = 'Site';
        function initMap() {
            var latlngOk = true;
            if (latitude === null || latitude === 'undefined' || latitude == 'null') {
                latlngOk = false;
            }
            if (longitude === null || longitude === 'undefined' || latitude == 'null') {
                latlngOk = false;
            }
            if (latlngOk === true) {
                latlng = new google.maps.LatLng(latitude, longitude);
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    center: latlng,
                    zoom: zoom,
                    draggable: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                if (markerMap === true) {
                    marker = new google.maps.Marker({
                        position: latlng,
                        icon: image,
                        map: map,
                        draggable: true,
                        title: title
                    });
                    // Call the new function for this first marker
                    googleMapsEventDrag(marker);
                }
            }
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
            google.maps.event.addListener(map, 'click', function (event) {
                if (markerMap === true) {
                    marker.setMap(null);
                }
                markerMap = true;
                marker = new google.maps.Marker({
                    position: event.latLng,
                    icon: image,
                    map: map,
                    draggable: true,
                    title: title
                });
                // Call the new function for this second marker
                googleMapsEventDrag(marker);
                map.panTo(event.latLng);
                document.getElementById('lat').value = event.latLng.lat();
                document.getElementById('lng').value = event.latLng.lng();
            });
        }
        google.maps.event.addDomListener(window, "load", initMap);
    }
    // New function (because calling multiple times)
    function googleMapsEventDrag(marker){
        google.maps.event.addListener(marker, 'drag', function (event) {
                document.getElementById('lat').value = event.latLng.lat();
                document.getElementById('lng').value = event.latLng.lng();
            });
    }

Answer 1

您正在为您创建的第一个标记添加拖动事件侦听器。但这并不意味着您为响应地图点击而创建的标记也会自动继承该拖动事件侦听器。每次添加标记以响应地图点击时，都需要添加单独的事件侦听器。

我认为这应该有效：

function launchMap(latitude, longitude, markerMap, zoom) {
    var marker, map, latlng, image= '../Images/eolienne_marker_white.png', title = 'Site';

    function initMap() {
        var latlngOk = true;
        if (latitude === null || latitude === 'undefined' || latitude == 'null') {
            latlngOk = false;
        }
        if (longitude === null || longitude === 'undefined' || latitude == 'null') {
            latlngOk = false;
        }
        if (latlngOk === true) {
            latlng = new google.maps.LatLng(latitude, longitude);
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: latlng,
                zoom: zoom,
                draggable: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            if (markerMap === true) {
                marker = new google.maps.Marker({
                    position: latlng,
                    icon: image,
                    map: map,
                    draggable: true,
                    title: title
                });

                google.maps.event.addListener(marker, 'drag', markerDrag);
            }

            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });

            google.maps.event.addListener(map, 'click', function (event) {
                if (markerMap === true) {
                    marker.setMap(null);
                }
                markerMap = true;
                marker = new google.maps.Marker({
                    position: event.latLng,
                    icon: image,
                    map: map,
                    draggable: true,
                    title: title
                });
                map.panTo(event.latLng);
                google.maps.event.addListener(marker, 'drag', markerDrag);
            });
        }
    }

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

function markerDrag(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
}

Google map api v3 - Event drag on marker is not trigger after a click event

1 个答案: