我第二次单击时地图未加载

Question

我想在 Kendo UI window 上显示我打开的街道地图。第一次点击地图显示，但之后它不会加载。即使我用google map 也是一样的结果。在 google 上搜索后，我发现我们不能多次初始化地图。我尝试过不同的方式，但它不起作用。可能是我的方法不好。这是我的代码

var data=' ';

function createMap() {
    data = $("#map").kendoMap({
        center: [23.7099, 90.4071],
        zoom: 15,
        layers: [
            {
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a>."
            }
        ]
    });   
}

function showMap(e) {
    e.preventDefault();
    var wnd = $("#Map").data("kendoWindow");
    createMap();
    wnd.content(data);
    wnd.center().open();

}
@(Html.Kendo().Window().Name("Map")
  .Title("<span class='glyphicon glyphicon-map-marker'></span> Map of the road")
  .Visible(false)
  .Modal(true)
  .Draggable(true)
  .Width(635)
)

ShowMap 在用户点击时触发

Answer 1

您必须重新绘制地图。您可以使用以下代码执行此操作：

google.maps.event.trigger(map, 'resize');

这将使地图刷新，解决您的问题。

Answer 2

请在函数末尾尝试这个

$("#map").data("kendoMap").resize();

我第二次单击时地图未加载

Map doesn't load second time i click

javascript

google-maps

openstreetmap

kendo-ui