vue-baidu-map自定义样式报错

原创已于 2023-03-09 20:15:02 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-09 20:04:12 首次发布

web开发专栏收录该内容

4 篇文章

订阅专栏

在Vue项目中使用vue-baidu-map插件集成百度地图API时，作者遇到自定义地图样式报错‘setMapStyleV2isnotafunction’。问题源于vue-baidu-map使用的是2.0版本的百度地图API。尝试在node_modules中修改vue-baidu-map组件的版本号无效。最终，通过在index.js中将v=2.0替换为v=3.0解决了问题，重新运行程序后无报错。

场景描述：

作者最近在vue项目开发过程中，需要引入vue-baidu-map插件调用百度地图API，同时需要自定义地图样式，然而在自定义地图样式时控制台报错，搜索了许多参考资料，发现都没有解决，最后观察报错自己尝试修改成功。

问题描述

在vue中引入vue-baidu-map调用百度地图API，自定义样式代码如下：
template中

<baidu-map
    class="map"
    :center="{ lng: 106.008381, lat: 35.558544 }"
    :zoom="18"
    :scroll-wheel-zoom="true"
    :double-click-zoom="false"
    @click="clickLeft"
    @ready="handler"
  ></baidu-map>

methods中

handler({ map }) {
      map.setMapStyleV2({
        styleId: "此处放置你自己的样式ID",
      });
    },

但是运行项目，控制台报错如下：
在这里插入图片描述
可以看出报错源自map.setMapStyleV2 is not a function

原因分析：

该报错源自vue-baidu-map使用的是2.0版本的百度地图，而该写法并不适用于此，应将2.0版本百度地图修改成3.0版本。
作者参考网上的修改教程，主要有两种方法(但于作者的问题而言都无效）：

1. 直接在script标签修改

该方法在vue-baidu-map插件并不适用，因为我们使用的是封装过的插件，没有直接在index.html中引入

2. 在node_modules中找到vue-baidu-map/componets/map/Map.vue，全局搜索`v=2.0`，将2.0改为3.0

在这里插入图片描述
** 作者采用此方法，但是仍然得不到解决。 **

解决方案：

作者仔细观察报错，发现如下：
在这里插入图片描述
于是我们可以找到node_modules/vue-baidu-map/index.js,全局搜索v=2.0替换成v=3.0

最后保存，停止终端，重新输入npm run serve运行程序。
在这里插入图片描述
成功解决，没有报错！！！