通过复选框启用和禁用拖动标记 [英] Enabling and Disabling Dragging Markers by Checkbox

问题描述

你可以看看这个演示，并让我知道我该如何制作当复选框未选中时，标记可以拖动。请注意，所有标记都有自己的关联复选框，这意味着用户可以锁定他们想要的每个标记（并非都在一起）。最初，所有标记在加载到页面时都未被选中。最后，当标记检查为锁时，我需要更改图标。

Can you please take a look at this Demo and let me know how I can make the markers Dragable when the check box is unchecked. Please be informed that all markers has their own associated checkbox it means that user can lock each marker which they want( Not all together). Initially all Markers are unchecked when they loaded to page . And finally I need to change the icon when the marker checked as lock.

  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);
});
}
});

**

Update

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

然后我将

then I add the

 bindMarkerDrag(marker);

这里是 Demo 但无法正常工作

inside the loop Here is a Demo but not working

推荐答案

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

1. 创建checbox


2. 
   
3. 管理复选框点击事件

这篇关于通过复选框启用和禁用拖动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！