实现方法：1、在“百度地图开发平台”中申请秘钥；2、在“index.html”中使用script标签引入地图链接；3、在“app.vue”中放入相关js代码实现百度地图。
本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue在项目中使用百度地图
第一步，去百度地图开发平台http://lbsyun.baidu.com/ 申请秘钥。
第二步在项目中引入，具体如下
其中index.html存放地图链接，代码如下
然后在app.vue里面实现，代码如下
<template> <div id="app">  <div id="allmap" ref="allmap"></div>  <router-view></router-view> </div></template>  <script>export default { name: 'app', methods:{  map(){   let map =new bmap.map(this.$refs.allmap); // 创建map实例   map.centerandzoom(new bmap.point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别   map.addcontrol(new bmap.maptypecontrol({//添加地图类型控件    maptypes:[     bmap_normal_map,     bmap_hybrid_map    ]}));   map.setcurrentcity(北京);// 设置地图显示的城市 此项是必须设置的   map.enablescrollwheelzoom(true); //开启鼠标滚轮缩放  }   }, mounted(){  this.map()   }}</script>  <style>#app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}#allmap{ height: 500px; overflow: hidden;  }</style>
相关推荐：《vue.js教程》
以上就是vuejs项目怎么实现百度地图显示的详细内容。