vue.js下如何引入百度地图的jsApi？引入百度地图的jsApi的两种方法介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue.js下如何引入百度地图的jsApi？引入百度地图的jsApi的两种方法介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2769字，纯文字阅读大概需要4分钟。

内容图文

这篇文章给大家介绍的文章内容是关于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.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中采用的是官方的示例如

<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的两种方法介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的vue.js下如何引入百度地图的jsApi？引入百度地图的jsApi的两种方法介绍全部内容，希望文章能够帮你解决vue.js下如何引入百度地图的jsApi？引入百度地图的jsApi的两种方法介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---