1. 90前端首页
  2. 前端框架

Vue中使用百度地图

一、前言

使用框架

1、vue2.x
2、echarts4+
3、threejs
4、vue-cli2.9+
5、nodejs12+
6、百度地图api

二、项目准备
1、百度地图api官网申请

参考百度地图api官网手册,进行api的密钥申请,地址如下
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
申请完了之后,在控制台查看访问百度地图的密钥。

Vue中使用百度地图
2、引入百度地图api

在vue工程的index.html中,head标签中引入以下代码,在ak处修改申请的密钥(即第二步中的ak)
<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=3.0&ak=申请的密钥\">
</script>

3、在build/webpack.base.conf.js中的module.exports={}中加入以下代码:
externals:{

\'BMap\': \'BMap\',
\'BMap_Symbol_SHAPE_POINT\':\'BMap_Symbol_SHAPE_POINT\'

}
4、修改界面的height

**默认情况下,页面的heigh为0,需要设置成100%,才能显示在界面中**
(1)index.html
<style type=\"text/css\">  
  html{height:100%}  
  body{height:100%;margin:0px;padding:0px;}
  #app{height:100%}
</style>

(2)app.vue

Vue中使用百度地图


(3)HelloWorld.vue
<style scoped>
    .hello {
     height: 100%;
    }
</style>

5、编写HelloBmap.vue组件

代码如下,注意一定要设置height,不然不会显示。
<template>
<div id=\"container\" ref=\"container\">
</div>
</template>
<script>
import BMap from \'BMap\'
export default {
  name: \'HelloBmap\',
  methods: {
    drawMap () {
      var map = new BMap.Map(\'container\')
      var point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(point, 5)
      map.enableScrollWheelZoom(true)
    }
  },
  mounted () {
    this.drawMap()
  }
}
</script>
<style lang=\"stylus\" scoped>
  #container
    height: 100%
    width 100%
</style>

6、在HelloWorld中添加HelloBmap组件

代码如下:
<template>
 <div class=\"hello\">
 <hello-bmap />
 </div>
</template>
<script>
import HelloBmap from \'./HelloBmap\'
export default {
  name: \'HelloWorld\',
  components: {
    HelloBmap
  }
}
</script>
<style scoped>
  .hello {
    height: 100%;
  }
</style>

7、效果图
Vue中使用百度地图

如需转载,请注明出处:https://www.90qianduan.com/frame/2401.html

展开阅读全文

发表评论

登录后才能评论