Question

我有一个带有谷歌地图和一些动态AJAX生成标记的网页。我有兴趣将地图导出为PNG。

我在这里查看了stackoverflow并找到了一个解决方案，使用Save current Google Map as image工作（http://html2canvas.hertzen.com/）。

不幸的是，经过几次尝试，我意识到它并没有正常工作。问题是，如果我加载一些点然后尝试导出地图，它会以某种方式忽略新的地图边界并且整个地图被移动，这意味着图片上的点位于错误的位置。

最好提供一个链接，以便您可以看到我的意思。不幸的是，该页面是捷克语，但我相信您将能够理解该怎么做。

所以如果你去这里：http://meteopage.com/climate/climate_map.php，只需加载页面并加载一般地图，然后在它下面，有一个按钮“Stahnout” （在捷克语下载），如果按下该键，会弹出一条消息，表明该图像将被生成，然后您将获得该图像，这应该没问题。

现在有问题的部分。返回页面并从菜单和右侧选择一个大陆，选中“jen hlavni mesta”复选框（仅限大写字母，以便加载更快）。或者实际上您可以使用过滤器过滤掉任何点。然后单击“Zobrazit”按钮（显示）。然后异步生成这些点并在地图上显示。但是......当您现在尝试下载地图时，会生成图像，但仔细查看并将原始地图与生成的图像进行比较，您会看到它已移动，点位于画布中的正确位置，但是地图被移动所以它不匹配......

function addMyMarker(file) {
    $.ajax({
        dataType: "json",
        url: file,
        success: function (json) {
            markerstoadd(json);
        },
    });
}

function markerstoadd(json) {
    var infoWindow = new google.maps.InfoWindow(),
        marker, i;
    removeMarkers();
    var bounds = new google.maps.LatLngBounds();
    stats = json[json.length - 1].stats;
    $("#stats").html(stats);

    for (i = 0; i < json.length - 1; i++) {
        var position = new google.maps.LatLng(json[i].lat, json[i].lon);
        bounds.extend(position);
        label_text = json[i].content;
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: json[i].content,
            label: label_text,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: eval(json[i].size),
                fillOpacity: 0.8,
                fillColor: json[i].color,
                strokeOpacity: 0.7,
                strokeColor: '#FFFFFF',
                strokeWeight: 1,
            },
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infobox.open(map, marker);
                longitude = json[i].lon;
                latitude = json[i].lat;...
                infobox.setContent(content);
                map.panTo(marker.getPosition());
            }
        })(marker, i));
        gmarkers.push(marker);
    }
    map.fitBounds(bounds);
    var zoom = map.getZoom();
    map.setZoom(zoom > 8 ? 8 : zoom);
}

function removeMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
        if (typeof (gmarkers[i].label) != "undefined") {
            gmarkers[i].label.setMap(null);
        }
    }
}

然后为了导出到画布我使用这个函数：

function savemap() {
    map.set('disableDefaultUI', true);
    var element = $("#google_map");
    html2canvas(element, {
        useCORS: true,
        onrendered: function (canvas) {
            var dataUrl = canvas.toDataURL("image/png");
            window.open(dataUrl, 'PNG');
            map.set('disableDefaultUI', false);
        }
    });
}

画布导出不正确

0 个答案: