如何在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中采用的是官方的示例如
因为只有在mounted的阶段,dom才会生成并挂载。
通过模块化引入的方法
实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件,我们可以直接通过npm安装,然后使用。
VUE:https://github.com/Dafrok/vue-baidu-map
React: https://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密钥 })
使用
看完上述内容,你们掌握如何在vue.js中引入百度地图jsApi的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站名称:如何在vue.js中引入百度地图jsApi
网址分享:http://pwwzsj.com/article/ghphdc.html