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

请你看一下这个，让我知道当复选框未选中时，如何使标记可拖动。请注意，所有标记都有自己的关联复选框。这意味着用户可以锁定他们想要的每个标记（不是全部）。最初，所有标记在加载到页面时均未选中。最后，当标记被选中为锁定时，我需要更改图标

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

然后我添加

 bindMarkerDrag(marker);

---

这里的循环中有一个不工作的循环，您可以这样做：

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

这将在开始拖动之前将draggable属性设置为false或true（如果将其置于

dragstart

事件中，则会有一点延迟）

---

将id

复选框

替换为所需的复选框。

检查此代码！！我已更新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);
});
}

});

var映射；
var位置=[]；
var contentString=“--”；
var infowindows=[]；
$（文档）.ready（函数（）{
var latlng=新的google.maps.latlng（11.61070722.740089）；
变量myOptions={
缩放：12，
中心：拉特林，
disableDefaultUI:true，
scaleControl：对，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
},
mapTypeControl:true，
DragTableCursor:“移动”，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
风险值数据={
“标记”：[{
“纬度”：11.606503，
“经度”：122.712637，
“标题”：“哥本哈根”
}, {
“纬度”：11.585988，
“经度”：122.757084，
“标题”：“巴塞罗那”
}
]
};
位置。长度=0；
对于（p=0；p锁定拖动：”；
div.appendChild（复选框）；
infowindow.setContent（div）；
信息窗口。打开（地图、标记）；
infowindows[p]=infowindow；
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口[p]。打开（地图、标记）；
});
}
});

正如我在评论中所说，您需要添加

复选框。checked=！marker.getDragable（）在标记中单击事件侦听器。不在事件侦听器复选框中

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

创建checbox
检查标记是否可拖动
管理复选框单击事件
添加另一个侦听dragstart的侦听器并选中复选框值。谢谢putvande，您能告诉我是否需要再次向标记添加润湿剂吗？比如：google.maps.event.addListener（如果是，请标记？我应该在fir复选框中单击什么操作？我试图添加一些不起作用的代码，你能看一下更新，看看我是否做得正确吗？谢谢，请看一下UpdateAnks上的演示，但是在同一个函数中，我必须在哪里使用它？我想是在
bindMarker
中。谢谢jsjunkie，这是这正是我想要的，如果你点击或再次点击一个框，它不能正常工作。如果你第二次选中或取消选中复选框，它将改变所有的状态checkboxes@MonaCoder，我已经更新了我的答案。问题是每次单击都会创建内容，并且在上使用了单个infowindow实例所有标记！！希望现在有帮助。是的，但仍然发生同样的事情。在信息窗口关闭之前，单击其他标记是可以的，但如果出于什么原因，我不知道它在所有框之间切换状态复选框
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = !marker.getDraggable();
checkbox.addEventListener('click', function () {
    marker.setDraggable(!this.checked);
});