这篇文章给大家介绍的文章内容是关于vue.js下如何引入百度地图的jsapi？引入百度地图的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.jsexternals: {    '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中采用的是官方的示例如
<p id="allmap"></p>
因为只有在mounted的阶段，dom才会生成并挂载。
通过模块化引入的方法实际上百度地图官方去年已经开源了基于jsapi的vue和react的对应开源组件，我们可以直接通过npm安装，然后使用。  
vue:[https://github.com/dafrok/vue...]  
react:[https://github.com/huiyan-fe/...]  
可参考它们在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>
相关推荐：
vue怎么封装组件？ vue tab切换组件封装的方法（附代码）
vue自定义指令及指令定义函数的具体分析（代码）
以上就是vue.js下如何引入百度地图的jsapi？引入百度地图的jsapi的两种方法介绍的详细内容。