vue 接入百度地图

在Vue中接入百度地图可以通过以下步骤实现：

1. 在main.js中全局注册百度地图组件库，引入Vue和BaiduMap，并使用Vue.use()方法注册BaiduMap组件，并传入你在百度地图开发者平台申请的密钥。例如：

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' });

2. 在需要使用地图的组件中，使用<baidu-map>标签来显示地图。例如：

<template>
  <baidu-map class="bm-view"></baidu-map>
</template>

3. 在样式中设置地图容器的宽度和高度。例如：

<style>
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>

4. 如果需要在组件中进行地图的绘制和交互，可以在组件的methods中创建地图实例，并调用相应的API进行绘图和添加交互效果。例如：

export default {
  name: "App",
  methods: {
    map() {
      let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
      map.centerAndZoom(new BMap.Point(121.484222, 31.242478), 11); // 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.MapTypeControl({ //添加地图类型控件
        mapTypes: \[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP\]
      }));
      map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    }
  }
}

这样就可以在Vue中接入百度地图了。请确保在使用之前替换YOUR_APP_KEY为你在百度地图开发者平台申请的密钥。
#### 引用[.reference_title]
- *1* [vue项目中使用百度地图，详细过程](https://blog.csdn.net/weixin_65793170/article/details/127839712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue中使用百度地图的三种方法](https://blog.csdn.net/LEVsunshine/article/details/102369821)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]