vue-baidu-map-3x 地图样式切换 “踩坑” 记：从报错到完美解决的全过程

在本次博客中，我将分享在使用vue-baidu-map-3x（版本为^1.0.39）时，处理地图样式切换需求时遇到的问题及解决方案。

在使用vue-baidu-map-3x过程中，我遇到了一个需要切换地图样式的需求。vue-baidu-map-3x本身提供了一个切换控件，代码如下：

<baidu-map :key="mapKey" class="map" ak="你的ak" v="3.0"
    @click="handleMapClick" :center="Center" 
    :zoom="13" scroll-wheel-zoom @ready="handler">
    <bm-map-type :map-types="['BMAP_HYBRID_MAP', 'BMAP_NORMAL_MAP']"></bm-map-type>
</baidu-map>

然而，这个自带的切换控件在样式上不太美观，并且其默认的显示样式是通过按钮进行切换的。虽然我们可以通过 CSS 对其样式进行强制修改，但这并不符合我们实际的业务需求，我们期望通过单选框来控制地图样式的切换。

接下来，先看看handler函数的实现：

function handler({ BMap, map }) {
	mapRef.value = map
	map.setMapStyleV2({
		styleId: '你的地图样式Id'
	});
	map.getContainer().style.backgroundColor = 'rgb(9,18,32)';
}

从代码中可以看出，是通过map.setMapStyleV2()方法来修改地图样式的。那么，我们是否也能利用这个方法，通过单选框来实现地图样式的切换呢？

我们的思路是，先将map保存到mapRef.value中，然后编写一个监听器，用于监听单选框所绑定的satelliteMap.value的状态变化。当状态发生改变时，调用mapRef.value.setMapType方法来切换地图样式。实现代码如下：

watch(() => satelliteMap.value, (newVal) => {
    if (mapRef.value) {
        if (newVal) {
            mapRef.value.setMapType(BMAP_SATELLITE_MAP);
            return;	
        }
        else{
            mapRef.value.setMapType(BMAP_NORMAL_MAP);
            return;
        }
    }
});

但是，当我们进行点击测试时，却发现地图样式并不能按照预期进行切换，并且控制台报错：

Uncaught (in promise) TypeError: mapRef.value.setMapType is not a function
    at index.vue:212:26

这就奇怪了，为什么在handler方法中能够正常使用setMapType方法，而在监听器中使用时却提示找不到这个函数呢？为了弄清楚原因，我们分别在这两个地方输出了mapRef.value，结果如下图所示：

通过对比发现，在handler和watch中输出的mapRef.value对象竟然不一样！

经过分析，我推测是百度官方在调用handler方法之后，又对map这个实例对象进行了替换。而我们使用的ref对象自动监听到了这次替换，所以mapRef.value跟着发生了变化，这就导致了在监听器中无法正确调用setMapType方法。

省流解决方法

那么，我们该如何解决这个问题呢？其实很简单，我们可以使用一个非响应式的对象来存储map，然后在后续需要切换地图样式的时候调用这个对象。修改后的代码如下：

let mapInstance;
function handler({ BMap, map}) {
	mapInstance = map;
	mapRef.value = map;
    map.setMapStyleV2({ styleId: '你的样式Id' });
	map.getContainer().style.backgroundColor = "rgb(9,18,32)";
};
watch(() => satelliteMap.value, (newVal) => {
	if (newVal) {
		mapInstance.setMapType(BMAP_SATELLITE_MAP);
		return;	
	}
	else{
		mapInstance.setMapType(BMAP_NORMAL_MAP);
		return;
	}
});

经过测试，使用这种方式调用成功实现了通过单选框来切换地图样式的功能。