vue使用百度地图API

沈清秋.

已于 2023-06-06 10:41:39 修改

阅读量1.7k

点赞数 1

分类专栏：百度地图文章标签： vue.js javascript

于 2023-04-11 18:56:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43651168/article/details/130090544

版权

百度地图专栏收录该内容

6 篇文章

订阅专栏

使用步骤

1.注册百度账号，申请成为百度开发者，获取服务密钥（ak）、使用相关服务；
2.vue项目映入key，配置百度地图API；
3.使用相关服务

示例

1.注册账号、申请服务密钥
注册账号、申请服务密钥跟着官网教程即可，我这边使用的是JavaScript API v3.0版本，官网链接地址如下：
https://lbsyun.baidu.com/index.php?title=jspopular3.0
2.vue项目引入key
我这边用的是vue3.x版本，版本不同有部分偏差的话可以看官方文档，主要是vue.config.js文件中需要配置一下。
首先，在public/index.html文件中输入申请的key：
关键代码：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=输入申请的密钥key"></script>

index.html文件具体代码：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
      <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=输入申请的密钥key"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

其次，在vue.conifg.js文件中配置BMap：
关键代码：

configureWebpack: {
    externals: {
      BMap: 'BMap'
    }
  }

vue.config.js文件完整代码（由于是示例，所以其他的配置一律没写，只有关键配置）：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    externals: {
      BMap: 'BMap'
    }
  }
})

最后，在vue文件中通过import引入BMap，如下所示：
（注意：如果不在vue.config.js配置BMap的话直接import是无法使用的）

<template>
  <div id="mapContainer" style="height: 600px;width: 100%"></div>
</template>

<script>
import { onMounted, ref } from 'vue';
import BMap from 'BMap'

export default {
  name: 'BaiduMap',
  setup() {
    let map = null;

    const initMap = () => {
      // 创建地图实例
      map = new BMap.Map('mapContainer');
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    }
    
    onMounted(() => {
      initMap();
    });
  },
};
</script>