如何在vue.js中引入百度地图jsApi
如何在vue.js中引入百度地图jsApi？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
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
<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。
importBaiduMapfrom'BaiduMap'
exportdefault{
name:'Index',
.....mounted(){
varmap=newBaiduMap.Map('allmap')//创建地图实例
varpoint=newBaiduMap.Point(120.343373,31.540212)//创建中心点坐标
varmarker=newBaiduMap.Marker(point)//创建标注
map.centerAndZoom(point,15)//初始化地图，设置中心点坐标和地图级别
map.addOverlay(marker)//将标注添加到地图中
}注意这里，实例化地图api，最好要在mounted阶段进行，如果你的dom中采用的是官方的示例如
<divid="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的。
安装
npmivue-baidu-map--save
初始化
importVuefrom'vue'
importBaiduMapfrom'vue-baidu-map'
Vue.use(BaiduMap,{
ak:'YOUR_APP_KEY'//这个地方是官方提供的ak密钥
})使用
<template>
<baidu-mapclass="map">
</baidu-map>
</template>
<style>
/*ThecontainerofBaiduMapmustbesetwidth&height.*/
.map{
width:100%;
height:300px;
}
</style>看完上述内容，你们掌握如何在vue.js中引入百度地图jsApi的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！
