Question

我正在动态添加Marker并将click事件添加到地图上添加的每个标记。这就是方法，我在地图上添加标记。

var pin = new google.maps.LatLng(Y, X);
var marker = new google.maps.Marker({ position: pin, map: map1 });
google.maps.event.addListener(marker, 'click', pinClicked);
marker.setMap(map1);

在点击事件中，基于某些条件，我显示带有某些细节和按钮的弹出窗口。一个按钮是关闭弹出窗口，另一个按钮是移动标记。我想要的是当我单击“移动”标记按钮时，我希望移动标记。我不希望默认情况下将draggable属性设置为true，因为它将允许在地图上添加标记时将其拖动。只有在单击弹出窗口上的按钮时，标记才可以拖动。

我怎样才能使这个工作。

感谢任何帮助。

感谢。

Answer 1

我已创建此jsFiddle，告诉您如何操作。

var markers = [];

function initialize() {
    var myLatLng1 = new google.maps.LatLng(50.965049,5.484231);
    var myLatLng2 = new google.maps.LatLng(50.97,5.474231);
    var myOptions = {
      zoom: 14,
      center: myLatLng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    for (var i = 0; i < 2; i++) {

        var marker = new google.maps.Marker({
            position: i === 0 ? myLatLng1 : myLatLng2,
            map: map,
            title: 'Galaconcert ' + i,
            id: i
        });

        markers[i] = marker;
        manageBindings(marker);
    }

    function manageBindings(marker) {

        var id = marker.id;

        google.maps.event.addListener(marker, 'click', function(ev) {

            var contentString = 
                '<div id="infowindow">' +
                'Nice infowindow ' + id + '<br />' +
                '<button class="move" data-id="' + id + '">move me</button> ' +
                '<button class="close" data-id="' + id + '">close me</button><br />' +
                '</div>'
            ;
            marker.infowindow = new google.maps.InfoWindow();
            marker.infowindow.setContent(contentString);
            marker.infowindow.open(map, marker);
        });
    }
}

$(function(){

     $('button.move').live('click', function(){
        var id = $(this).data('id');
        markers[id].setDraggable(true);
    });

    $('button.close').live('click', function(){
        var id = $(this).data('id');
        markers[id].infowindow.close();
    });

    initialize(); 
});

您应该将所有创建的标记保存在一个数组中，以便可以访问它们。在infowindow中，您存储对该数组的引用 - 在我的示例中，它位于按钮的数据属性中。然后当infowindow发生任何事情时，您可以访问特定标记并将其可拖动选项设置为true。

代码应该重构，不应该使用live，但你应该有这个想法。

Answer 2

有一种标记方法可以让你设置可拖动的选项。

然后还可以更改按钮以显示位置标记，这样当您将标记拖动到所需位置时，可以再次单击它以放置标记并再次将draggable属性设置为false。

    new google.maps.event.addListener(button, 'click', function(){
        if(button.status == "Move"){
            marker.setDraggable(true);
        } else {
            marker.setDraggable(false);
        }
    });

请注意这是psuedo代码，只是突出显示setDraggable函数。

Answer 3

Google标记具有属性setDraggable，可以将其设置为可拖动标记为true或false。

marker.setDraggable（真）;或

marker.setDraggable（假）;

如何在点击按钮时动态地在地图上移动标记

3 个答案: