Question

我正在使用bindTo（）我在这里找到了这个示例Bind Marker with polygon vertices google mapv3，但问题是我将标记拖到它的新位置后无法删除标记。

var map;
var count = 0;
var polycolor = '#ED1B24';
var polyarray = [];
var marker;
var markers = [];
var path = new google.maps.MVCArray;

function initialize() {
    var initial = new google.maps.LatLng(53.199246241276875, -105.76864242553711);
    var mapOptions = {
        zoom: 16,
        center: initial,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },
        mapTypeControl: false
    };
    poly.setPaths(new google.maps.MVCArray([path]));
     poly.binder = new MVCArrayBinder(poly.getPath());
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function (e) {
        addMarker(e);
        addPolygon(e);
    });
}

function MVCArrayBinder(mvcArray){
            this.array_ = mvcArray;
        }
        MVCArrayBinder.prototype = new google.maps.MVCObject();
        MVCArrayBinder.prototype.get = function(key) {
            if (!isNaN(parseInt(key))){
                return this.array_.getAt(parseInt(key));
            } else {
                this.array_.get(key);
            }
        }
        MVCArrayBinder.prototype.set = function(key, val) {
            if (!isNaN(parseInt(key))){
                this.array_.setAt(parseInt(key), val);
            } else {
                this.array_.set(key, val);
            }
        }





var getMarkerlatlng = function (lat, lng) {
    return lat + '_' + lng;
}

var addMarker = function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();

    var markerId = getMarkerlatlng(lat, lng);
    marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true,
        id: markerId
    });

    var len = path.getLength();
    marker.bindTo('position', poly.binder, (len).toString());

    markers[markerId] = marker;

    google.maps.event.addListener(marker, "rightclick", function (point) {
        var markerId = getMarkerlatlng(point.latLng.lat(), point.latLng.lng());
        marker = markers[markerId];
        deletemarker(markerId);
        deletepolygon(point.latLng);
    });
}


var deletemarker = function (markerId) {
    markers[markerId].setMap(null);
    delete markers[markerId];
}

var poly = new google.maps.Polygon({
    strokeColor: polycolor,
    strokeOpacity: 1.0,
    strokeWeight: 2
});

function addPolygon(elpath) {
    path.insertAt(path.length, elpath.latLng);
    poly.setMap(map);
}

var deletemarker = function (markerId) {
    marker = markers[markerId];
    marker.setMap(null);
    delete markers[markerId];
}

var deletepolygon = function (pt) {
    i = 0;
    var thepath = poly.getPath();

    thepath.forEach(function (ltlng) {
        if (ltlng.equals(pt)) {
            path.removeAt(i);

        }
        i++;
    });
}


google.maps.event.addDomListener(window, 'load', initialize);

以下是Demo

提前谢谢。

Answer 1

您使用marker作为索引标识markers[]中的marker _分隔的var getMarkerlatlng = function (lat, lng) { return lat + '_' + lng; }的第一纬度和经度：

markers[]

然后当您更改位置时，您尝试使用新位置作为markerId从markers[]删除标记，但是在新位置{... 1}中没有对象}：

google.maps.event.addListener(marker, "rightclick", function (point) {
    // THIS MARKERID IS DIFFERENT SINCE YOU CHANGE THE POSITION, SO THERE IS 
    // NOT MARKER WITH THIS ID
    var markerId = getMarkerlatlng(point.latLng.lat(), point.latLng.lng());
    marker = markers[markerId];
    deletemarker(markerId);
    deletepolygon(point.latLng);
});

您可以使用closure解决此问题，因为您有以下addMethod()：

var addMarker = function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();

    var markerId = getMarkerlatlng(lat, lng);
    marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true,
        id: markerId
    });

    var len = path.getLength();
    marker.bindTo('position', poly.binder, (len).toString());

    markers[markerId] = marker;

    google.maps.event.addListener(marker, "rightclick", function (point) {
        // COMMENT THIS SINCE YOU'VE ACCESS IN THE CLOSURE TO THE MARKERID
        // CALCULATED IN THE OUTER FUNCTION
        //var markerId = getMarkerlatlng(point.latLng.lat(), point.latLng.lng());
        marker = markers[markerId];
        deletemarker(markerId);
        deletepolygon(point.latLng);
    });
}

您在内部markerId的上下文中有正确的google.maps.event.addListener，因此只需在addListener内注释重新计算此内容，并使用外部函数中计算的markerId。

请参见此工作jsfiddle。

希望这有帮助，

使用bindTo（）无法删除新位置的标记

1 个答案: