Question

我正在制作动态图像映射器，用户可以加载他们的公寓平面图，然后将标记放在地板的某些部分上。所以我不想动态地改变Leaflet地图图像层的URL。

我是第一次使用ChangeMap功能加载地图。它正确加载我的图像。

function ChangeMap(_url)
{
var map = L.map('map', {
    minZoom: 1,
    maxZoom: 5,
    center: [0, 0],
    zoom: 3,
    crs: L.CRS.Simple
}).setView([50.4333, 30.5167], 3);

// dimensions of the image
var w = 1526,
    h = 626,
    url = _url;

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay,
// so that it covers the entire map
var overlay = L.imageOverlay(url, bounds);
overlay.addTo(map);
}

但是，如果我再次尝试没有刷新页面，我会收到错误“地图容器已被初始化”。在那次错误之后，我想我可以像这样动态地添加id ='map'的div。

var mapContainer = $("#mapContainer");
mapContainer.append("<div id='map' width='100%' height='400px'></div>");

我在ChangeMap（）函数的开头添加了append函数。但这一次页面上没有地图。我怎样才能做到这一点？

Answer 1

仅初始化地图一次......所以从var map = L.map('map', {...中取出ChangeMap并仅运行一次。我还建议只初始化L.imageOverlay ...并使用{ {3}}在ChangeMap内需要时动态交换。

使用文件输入更改传单ImageLayer

1 个答案: