如何在下拉菜单切换时重新加载矢量地图？

你现在遇到的问题本质是：每次切换下拉选项时，新创建的地图会和旧地图叠加或无法正确更新——因为原代码每次调用getMap()都会生成一个新的jvm.Map实例，但旧的地图元素和实例都没有被清理。下面是具体的修复方案：

核心思路 #

在创建新地图前，我们需要先销毁之前的地图实例（避免内存泄漏），同时清空容器内的旧地图DOM元素，确保每次切换都能加载全新的对应区域地图。

修改后的完整代码 #

HTML部分（保持原有结构不变）

<form>
  <select id="mySelect" onchange="getMap()">
    <option value="SI">Slovenia</option>
    <option value="SR">Serbia</option>
  </select>
</form>
<div id="map_vector"></div>

JavaScript部分

// 全局保存地图实例，方便后续销毁操作
let mapInstance = null;

$(document).ready(function () {
    getMap();
});

function getMap() {
    const focus = document.getElementById("mySelect").value;
    const mapContainer = $('#map_vector');
    
    // 1. 如果已有地图实例，先销毁它的内部状态和事件监听
    if (mapInstance) {
        mapInstance.destroy();
    }
    
    // 2. 清空容器，彻底移除旧地图的DOM元素
    mapContainer.empty();
    
    // 3. 创建新的地图实例并保存引用
    mapInstance = new jvm.Map({
        container: mapContainer,
        map: 'europe_mill',
        focusOn: [focus]
    });
}

方案说明 #

• 用全局变量mapInstance追踪当前地图对象，确保每次切换时能调用destroy()方法彻底清理旧地图的资源，避免内存泄漏。
• mapContainer.empty()会移除容器内所有旧的地图DOM元素，解决新地图和旧地图叠加显示的问题。
• 最后重新初始化地图实例，保证下拉选项切换后，地图能聚焦到选中的区域。

内容的提问来源于stack exchange，提问作者Biljana Glumac