详解vue.js下引入百度地图jsApi的两种方法

前言

今天有个项目需要用到百度地图，一般我们在移动端使用百度地图，都是直接通过这样的方式，直接引入百度地图的jsApi。

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

这种方法的原理，就是直接给全局widow对象添加一个BMap对象，从而可以使我们在已经加载api的页面的任何地方，使用百度地图的api。但是单单通过引入的方法，对于使用单文件组件的vue+webpack开发的项目，显然是不够的。于是，通过网上查资料。这里找到了两种方法。

直接引入script标签

第一种方法是通过直接引入的方法，当然除了引入script标签还不够，要想在vue文件中使用bmap对象，还需要在webpack的配置文件中，设置外部扩展(externals属性)

//webpack.dev.conf.js

externals: {
 'BaiduMap': 'BMap'
}

externales属性来自官方的解释是:

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

webpack文档也给出了一个示例：从 CDN 引入 jQuery，而不是把它打包。

index.html

<script
 src="https://code.jquery.com/jquery-3.1.0.js"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous">
</script>

webpack.config.js

externals: {
 jquery: 'jQuery'
}

import $ from 'jquery';

$('.my-element').animate(...);

参考这个实例，我们就可以在我们的项目中通过引入js文件的方法，直接使用百度地图的api。

import BaiduMap from 'BaiduMap'
export default {
 name: 'Index',
 .....

mounted() {
 
 var map = new BaiduMap.Map('allmap') // 创建地图实例
 var point = new BaiduMap.Point(120.343373,31.540212) // 创建中心点坐标
 var marker = new BaiduMap.Marker(point) // 创建标注

 map.centerAndZoom(point,15) // 初始化地图，设置中心点坐标和地图级别


 map.addOverlay(marker) // 将标注添加到地图中

}

注意这里，实例化地图api，最好要在mounted阶段进行，如果你的dom中采用的是官方的示例如

<div id="allmap"></div>

因为只有在mounted的阶段，dom才会生成并挂载。

通过模块化引入的方法

实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件，我们可以直接通过npm安装，然后使用。

VUE:https://github.com/Dafrok/vue-baidu-map

React: https://github.com/huiyan-fe/react-bmap

可参考它们在github上面的文档进行使用。这里只介绍下vue的。

安装

npm i vue-baidu-map --save

初始化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
 ak: 'YOUR_APP_KEY' //这个地方是官方提供的ak密钥
})

使用

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

<style>
/* The container of BaiduMap must be set width & height. */
.map {
 width: 100%;
 height: 300px;
}
</style>

爱go旅游网还为您提供以下相关内容希望对您有帮助：

1. 访问百度地图开放平台。2. 浏览头部导航栏的开发文档，找到JavaScript API。3. 点击申请，根据提示填写相关信息以获取密钥。接下来，通过npm或yarn进行 vue-baidu-map 的安装。在 main.js 中全局注册组件，并在所需页面引入地图组件。为了实现地图缩放控制，开启鼠标滚轮滚动功能。创建一个简单地图实例...

BMapGLLib.vue是文件，bmpgl_lib.js是调用方法 其实建立在哪看你自己的意愿啦。（小声逼逼）如果只用BMapGL那么只用loadBaiDuMap() 这个方法就好了。（再次小声逼逼）

安装Vue Baidu Map组件相对简单，通过NPM加载依赖即可。若想要全局使用，可以进行一次性引入，而局部使用则需要对组件进行注册。在模板组件中使用Vue Baidu Map，与使用其他模板组件的方式并无二致，简单快捷。此外，该组件的开发体验也相当良好，提供了丰富的文档和示例，帮助开发者快速上手。如需了解更多关...

由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。渲染，是CG的最后一道工序（当然，...

//webapi.amap.com/ui/1.1/main-async.js"> 总结一句话总结vue-amap引入高德地图API的原理：vue-map之所以能够使用高德地图的JSAPI以及AMapUI是因为通过生成引入JSAPI和AMapUI的script标签，并将标签插入到项目的html文件。原文：https://juejin.cn/post/7103733273573982245 ...

通常，我们会在main.js文件中直接加载JSAPI，如代码所示，以快速加载API。但需优化首屏加载，考虑使用JSAPI懒加载。创建map.js文件，于地图使用的vue文件中执行地图API加载，并确保加载代码置于组件的beforeMount生命周期中。地图选点 地图选点功能常见于地图开发，通过点击生成marker，并支持拖拽标记实现地图...

第一步：安装Vue-Amap插件 通过cnpm命令将Vue-Amap插件添加到项目中，确保在项目依赖中引入该插件，执行命令：cnpm i vue-amap --save。第二步：在main.js文件中注册使用Vue-Amap插件 在main.js文件中，确保正确引入并注册Vue-Amap插件。确保使用您自己的高德地图API密钥，为了演示目的，这里使用了一个...

1. **安装插件 使用命令行执行：使用方法 npm install vue-baidu-map --save 2. **HTML代码部分 组件的HTML代码如下，包括地图名和事件监听部分：close="infoWindowClose" @open="infoWindowOpen"> {{mapName}} 3. **JS代码 JS代码用于引入组件并填充数据，示例如下：javascript 注意：JS代码示例...

配置Vue Router时，通过创建路由对象，定义路径、组件和导航模式。在main.js中，将router和pinia集成到Vue应用中，实现全局路由和状态管理。在App.vue中，通过VueRouter创建可切换的标签页来展示不同页面内容。封装接口和数据处理方面，通过pinia的store来管理城市数据，如城市列表、地图和天气信息。在页面B和...

研究百度地图聚合源码发现，如果打算自定义文字需要修改两处：一、修改 BMapLib.MarkerClusterer.js 插件中 Cluster.prototype.updateClusterMarker 方法，实现过程如下：方法中： this._clusterMarker.setText(this._markers.length); 表示， 聚合点显示的文字内容是 当前 Cluster 类 _markers ...