Question

我有一个网站，这是一个单页表单，其中包含Google Map作为表单步骤之一。 Google Map是使用他们的JavaScript API创建的。

用户输入他们的地址并且地图加载该地址，然后用户可以在其屋顶上绘制多边形并获得该多边形的区域。

当用户进入网站时，地图上面会有一个带有输入和按钮的叠加层。地址输入后，地图会加载地址，覆盖图会消失。

地图还有两个自定义按钮，一个用于清除地图，一个用于再次显示覆盖，用户可以输入新地址。

以下是我处理加载和清除地图的所有代码：

initMap函数，它还创建了两个按钮。

function initMap() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    streetViewControl: false,
    center: {
        lat: 40.2474449,
        lng: -5.7720482
    }
});
var centerControlDiv = document.createElement('div');
var centerControl = new MapControl(centerControlDiv);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
centerControlDiv.className = "mapControl";
map.setTilt(0);
}

提交叠加层时调用的showMap函数：

function showMap() {
var zipCode = document.getElementById("postalCode").value;
geocoder.geocode({
    'address': zipCode + " España"
}, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        allowDrawing();
        $(".mapCover").fadeOut(300);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});
}

allowDrawing函数，允许用户在地图上绘图：

function allowDrawing() {
drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    polygonOptions: {
        fillColor: 'rgba(0, 212, 153, 0.4)',
        strokeColor: "rgb(0, 212, 153)",
        fillOpacity: 1,
        strokeWeight: 4,
        editable: true
    }
});
drawingManager.setMap(map);
polygon && polygon.setMap(null);

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (plgn) {
    polygon = plgn;
    drawingManager.setDrawingMode(null);
    calcArea(polygon);
    google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
        calcArea(polygon);
    });
    google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
        calcArea(polygon);
    });
    google.maps.event.addListener(polygon.getPath(), 'remove_at', function () {
        calcArea(polygon);
    });
});
}

清晰地图按钮只调用允许绘图功能，后退按钮调用显示地图功能。

因为我只希望一次绘制一个多边形并且多边形是可编辑的，所以当多边形完成时我执行此操作：drawingManager.setDrawingMode(null);以便现在禁用绘图并且用户可以编辑形状。 / p>

我的问题是一切都按原样运行，除非在没有多边形时按下后退按钮。当发生这种情况时drawingMode没有为drawingManager设置，用户可以随意绘制尽可能多的形状。这是一个非常奇怪的问题，因为当调用清晰地图函数或用户按下后退按钮而不清除地图时它不会发生。

我尝试了多种方法，例如删除绘图管理器的任何侦听器，但除了一件事之外没有任何工作。每次用户提交叠加层时，都要调用initMap函数。

这似乎不是一件好事，一遍又一遍地调用initMap，因为我需要做的就是将地图置于新地址的中心并再次启用绘图。

感谢任何帮助。

以下是显示问题的示例JSFiddle。

Answer 1

单击后退按钮时将drawingManager's drawingMode设置为null。

Google地图重新启动图纸管理器

1 个答案: