详解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="http://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:http://github.com/Dafrok/vue-baidu-map



React: http://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>







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。