Google Maps V3 - 触发UI事件或MVC状态更改事件的事件侦听器

Question

我有两个听众，一个用于用户点击，一个用于＆＃34; insert_at＆＃34;。我想实现一个自完成多边形。因此，最初用户将单击以绘制多边形。当用户绘制多边形时，我不想触发＆＃34; insert_at＆＃34;监听器。多边形完成后，我想要＆＃34; insert_at＆＃34;听众被触发。我怎么做？我的代码片段如下：

var poly;
var map;
var markers = [];

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {lat: 3.165236, lng: 101.654315} //choose an appropriate center for the map
    });

    poly = new google.maps.Polygon({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true
    });
    poly.setMap(map);

    map.addListener('click', addLatLng);

    google.maps.event.addListener(poly.getPath(), 'insert_at', function(index, obj) {

        var path = poly.getPath();

        //Only insert if it's not the last coordinate
        if ($("#polygon-coordinates").find("div.nested-fields ").eq(index).length > 0) {
            $("#polygon-coordinates").find("div.nested-fields").eq(index - 1).after('<div class="nested-fields row"></br><div class="col-xs-6"></br><label>Latitude</label></br><input class="form-control" id=""area[polygon_coordinates_attributes][' + index + '][latitude]" name="area[polygon_coordinates_attributes][' + index + '][latitude]" value="' + path.b[index].lat() + '"></div>' +
                '<div class="col-xs-6"></br><label>Longitude</label></br><input class="form-control" name="area[polygon_coordinates_attributes][' + index + '][longitude]" name="area[polygon_coordinates_attributes][' + index + '][longitude]" value="' + path.b[index].lng() + '"></div></br></div>');

            addMarker(path.b[index], index);

        }
    });

    google.maps.event.addListener(poly.getPath(), 'set_at', function(index, obj) {

        var path = poly.getPath();
        var lat = "area[polygon_coordinates_attributes][" + index + "][latitude]";
        var lng = "area[polygon_coordinates_attributes][" + index + "][longitude]";
        $("input[name='" + lat + "']").val(path.b[index].lat());
        $("input[name='" + lng + "']").val(path.b[index].lng());
        //delete existing marker here

        deleteMarker(index);
        debugger
        addMarker(path.b[index], index);

    });

}

function isNotDupMarker(path, index) {
    //check if the coordinates are duplicated

    if (markers[index - 1] !== undefined && path[index].lat() !== markers[index - 1].position.lat()) {
        return true;
    } else {
        return false;
    }
}

function addMarker(location) {

    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });
    markers.push(marker);
}

function deleteMarker(index) {
    markers[index].setMap(null);

}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
    var path = poly.getPath();

    // Because path is an MVCArray, we can simply append a new coordinate
    // and it will automatically appear.
    var index = path.push(event.latLng);

    var i = index - 1


    addMarker(event.latLng, index);

    $("#polygon-coordinates").append('<div class="nested-fields row"></br><div class="col-xs-6"></br><label>Latitude</label></br><input class="form-control" id=""area[polygon_coordinates_attributes][' + i + '][latitude]" name="area[polygon_coordinates_attributes][' + i + '][latitude]" value="' + path.getAt(index - 1).lat() + '"></div>' +
        '<div class="col-xs-6"></br><label>Longitude</label></br><input class="form-control" name="area[polygon_coordinates_attributes][' + i + '][longitude]" name="area[polygon_coordinates_attributes][' + i + '][longitude]" value="' + path.getAt(index - 1).lng() + '"></div></br></div>');

}