一、申请百度地图密钥
首先,你需要去百度地图开放平台(https://lbsyun.baidu.com/)注册账号并登录。创建应用,填写应用名称、应用类型等信息,获取百度地图的密钥(ak)。
二、安装依赖
在你的 Vue 项目中,可以使用以下两种方式引入百度地图:
通过 CDN 引入:
在 HTML 文件中添加以下代码引入百度地图的 JavaScript API: <script src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>其中,将 “你的密钥” 替换为你在百度地图开放平台申请到的密钥。
使用 npm 安装:
运行npm install vue-baidu-map --save安装vue-baidu-map插件。
三、在 Vue 项目中使用百度地图
如果是通过 CDN 引入:
在 Vue 组件中,可以直接通过全局变量BMap来使用百度地图。例如: mounted() {
c*t map = new BMap.Map('mapContainer'); // 创建地图实例,其中'mapContainer'是放置地图的容器的 ID
map.cen*ndZoom(new BMap.Point(11*04, 39.915), 11); // 设置地图中心点和缩放级别
}如果是使用