通过复选框启用和禁用拖动标记

Question

您能否看看这个Demo，并告诉我如何在未选中复选框时使标记可拖动。请注意，所有标记都有自己的关联复选框，这意味着用户可以锁定他们想要的每个标记（不是全部在一起）。最初，所有标记在加载到 page 时都未选中。最后，当标记检查为锁定时，我需要更改图标。

  var contentString = ' -- Lock <input name="your_name" value="your_value" type="checkbox">';
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var infowindow =  new google.maps.InfoWindow({ content: "" });
  var data = {
        "markers": [{
                "latitude": 11.606503,
                "longitude": 122.712637,
                "title": "Copenhagen"
            }, {
                "latitude": 11.585988,
                "longitude": 122.757084,
                "title": "Barcelona"
            }
        ]
    };
    locations.length = 0;
    for (p = 0; p < data.markers.length; p++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
            map: map,
            draggable: true,
            title: "marker " + p,
            id: p
        });

        bindMarker(marker);
        bindInfoWindow(marker, map, infowindow, data.markers[p].title);
    }

    function bindMarker(marker) {
        google.maps.event.addListener(marker, 'dragend', function () {
   marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
        });
        google.maps.event.addListener(marker, 'click', function () {
        });
    }
    function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription + contentString);
    infowindow.open(map, marker);
});
}
});

**

更新

  function bindMarkerDrag(marker){
        google.maps.event.addListener(checkbox, "click", function(){
            draggable: false
         //marker.setClickable(checkbox.checked);
      });
        }

然后我添加

 bindMarkerDrag(marker);

在循环内部这是一个Demo，但不起作用

Answer 1

正如我在评论中所说，您需要在标记单击事件侦听器中添加checkbox.checked = !marker.getDraggable();。不在复选框事件监听器中。

var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = !marker.getDraggable();
checkbox.addEventListener('click', function () {
    marker.setDraggable(!this.checked);
});

1. 创建复选框
2. 检查标记是否可拖动
3. 管理复选框点击事件

Answer 2

你可以这样：

google.maps.event.addListener(marker, 'mouseover', function(e){
    marker.setDraggable(document.getElementById('checkbox').checked);
});

这将在你开始拖动之前将draggable属性设置为false或true（如果你把它放在dragstart事件上，你会有一点延迟。） 将 ID checkbox 替换为您需要的 ID。

Answer 3

检查此代码！我已更新 buildInfoWindow 函数以满足您的要求。

var map;
var locations = [];
var contentString = "--";
var infowindows = [];

$(document).ready(function () {
    var latlng = new google.maps.LatLng(11.610707, 122.740089);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: true,
        draggableCursor: 'move',
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var data = {
        "markers": [{
                "latitude": 11.606503,
                "longitude": 122.712637,
                "title": "Copenhagen"
            }, {
                "latitude": 11.585988,
                "longitude": 122.757084,
                "title": "Barcelona"
            }
        ]
    };
    locations.length = 0;
    for (p = 0; p < data.markers.length; p++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
            map: map,
            draggable: true,
            title: "marker " + p,
            id: p
        });
        var infowindow =  new google.maps.InfoWindow({ content: "" });
        bindMarker(marker);
        bindInfoWindow(marker, map, infowindow, data.markers[p].title, p);
        bindMarkerDrag(marker);
    }

    function bindMarker(marker) {
        google.maps.event.addListener(marker, 'dragend', function () {
   marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
        });
    }
    function bindMarkerDrag(marker){

    }


    function bindInfoWindow(marker, map, infowindow, strDescription, p) {
google.maps.event.addListenerOnce(marker, 'click', function() {
     var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.addEventListener('click', function () {
        marker.setDraggable(!this.checked);
    });
        var div = document.createElement('div');
        div.innerHTML = strDescription + contentString + "<br /> Lock             drag:  &nbsp;";
        div.appendChild(checkbox);
    infowindow.setContent(div);
    infowindow.open(map, marker);
    infowindows[p]= infowindow;
});
   google.maps.event.addListener(marker, 'click', function() {
    infowindows[p].open(map, marker);
});
}

});