如何在vue.js中引入百度地图jsApi

如何在vue.js中引入百度地图jsApi？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

10年积累的网站设计制作、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有松岭免费网站建设让你可以放心的选择与我们合作。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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

//webpack.dev.conf.js

externals: {
  'BaiduMap': 'BMap'
}

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

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

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

index.html

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中采用的是官方的示例如