Bootstrap Modal 中的地图堆栈答案

【问题标题】：Here Map stacks in Bootstraps ModalBootstrap Modal 中的地图堆栈
【发布时间】：2022-11-30 19:42:31
【问题描述】：

我有几个模态按钮，单击它们应该会在 PolyLine 中显示预先保存的地图路线。下面是我在 php Ajax 模态调用中使用的代码。 $jsline、$center_lat、$center_lng 是 php 变量，由 ajax 查询在模态点击时确定。

<div id="map" style="width:100%;height:450px"></div>
<script>
    $(document).on("shown.bs.modal", function () {
        function addPolylineToMap(map) {
            var lineString = new H.geo.LineString();
            '.$jsline.'
            map.addObject(new H.map.Polyline(
                lineString, { style: { lineWidth: 4 }}
            ));
        }
        var platform = new H.service.Platform({
            apikey: myhereapi
        });
        var defaultLayers = platform.createDefaultLayers();
        var map = new H.Map(document.getElementById("map"),
                    defaultLayers.vector.normal.map,{
                    center: {lat:'.$center_lat.', lng:'.$center_lng.'},
                    zoom: 5.65,
                    pixelRatio: window.devicePixelRatio || 1
                });
        window.addEventListener("resize", () => map.getViewPort().resize());
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        var ui = H.ui.UI.createDefault(map, defaultLayers);
        addPolylineToMap(map);
    });
</script>

如果我删除 on("shown.bs.modal") 模式窗口弹出空白地图（白色背景，无地图）。当我使用on("shown.bs.modal")时，模式窗口弹出并在第一次点击时正常工作。然而，第二次、第三次和进一步的点击将堆叠地图。我的意思是在第二次点击时会出现 2 张地图。第三次点击 3 张地图出现。为什么地图会堆叠起来？如何解决这个问题？据我所知，以前没有其他人遇到过类似的问题。

【问题讨论】：

标签： here-api

【解决方案1】：

我设法找到了解决方案，所以如果其他人遇到此类问题，我会分享它。我在加载新地图实例之前添加了$("#map").empty();，如下所示。

<div id="map" style="width:100%;height:450px"></div>
<script>
    $(document).on("shown.bs.modal", function () {
        function addPolylineToMap(map) {
            var lineString = new H.geo.LineString();
            '.$jsline.'
            map.addObject(new H.map.Polyline(
                lineString, { style: { lineWidth: 4 }}
            ));
        }
        $("#map").empty();
        var platform = new H.service.Platform({
            apikey: myhereapi
        });
        var defaultLayers = platform.createDefaultLayers();
        var map = new H.Map(document.getElementById("map"),
                    defaultLayers.vector.normal.map,{
                    center: {lat:'.$center_lat.', lng:'.$center_lng.'},
                    zoom: 5.65,
                    pixelRatio: window.devicePixelRatio || 1
                });
        window.addEventListener("resize", () => map.getViewPort().resize());
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        var ui = H.ui.UI.createDefault(map, defaultLayers);
        addPolylineToMap(map);
    });
</script>

【讨论】：