vue引入百度地图map

最新推荐文章于 2025-06-12 15:30:20 发布

CoCoManYY

最新推荐文章于 2025-06-12 15:30:20 发布

阅读量7.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/m_oman/article/details/80301987

本文详细介绍了如何在Vue项目中集成百度地图，包括申请密钥、在HTML和Webpack配置中引入、在组件中使用，以及解决Chrome浏览器的警告问题。重点强调了在Vue中处理地图对象的方法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、申请百度地图密匙

二、在index.html中引入

<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>

三、在webpack.base.conf.js配置文件中配置BMap；

// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象)，在module.exports 中与entry平级；
  externals: {
    'BMap': 'BMap'
  },

四、记得在地图组件中引入BMap

import BMap from 'BMap';

五、基本方法声明放入methods中，mounted钩子函数里面初始化

export default {
        name: "mymap",
    data(){
          return{
          map: ''
          }
    },
      mounted() {
        //创建和初始化地图函数：

        this.initMap();
      },
      methods: {
        //创建和初始化地图函数：
        initMap(){
        this.createMap();//创建地图

          // 这后面都错了我不知道为啥，说是什么map没有这个函数心痛
          //
        this.setMapE