【百度 JavaScript API v3.0】安装

最新推荐文章于 2025-06-04 23:43:58 发布

原创最新推荐文章于 2025-06-04 23:43:58 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

数据可视化专栏收录该内容

33 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用百度地图JavaScriptAPIv3.0。首先，在index.html中引入API，然后在组件中创建地图实例，设置中心点和缩放级别。此外，还展示了通过Promise处理异步加载地图库的方法。

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

安装JavaScript API v3.0

需求

在vue项目中使用原生的百度JavaScript API v3.0。

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

引入方式安装

第一步：在public的index.html中引入

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

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.map = new BMap.Map("map");
    this.map.centerAndZoom(new BMap.Point(117.06 ,36.67), 17);
    this.map.enableScrollWheelZoom();
  },
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
  margin-top: 50px;
}
</style>

bmap.js安装

在src文件夹目录下安装bmpgl.js。

export function MP(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(BMap)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

在组件中使用

import { MP } from '../map.js'

mounted() {
  this.$nextTick(() => {
    const that = this
    MP(that.ak).then(BMap => {
      // ...
    })
  })
}