0

我正在动态添加标记并将点击事件添加到地图上添加的每个标记。就是这样，我在地图上添加标记。

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，因为它允许在添加到地图时拖动标记。仅当单击弹出窗口上的按钮时，标记才应可拖动。

我怎样才能得到这个工作。

任何帮助表示赞赏。

谢谢。

4

3 回答 3

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 中发生任何事情时，您可以访问特定标记并将其可拖动选项设置为 true。

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

于 2013-03-14T08:27:29.467 回答
0

Google 标记具有 setDraggable 属性，通过它可以将标记可拖动设置为真或假。

标记.setDraggable(true); 或者

标记.setDraggable(false);

于 2013-11-20T09:15:19.563 回答
0

Markers 有一种方法可以让您设置它们的可拖动选项。

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

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

请注意，这是仅突出显示 setDraggable 函数的伪代码。

于 2013-03-14T07:53:14.930 回答