vue引入百度地图，显示地址。

首页index.js:

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

 

显示地图的页面

<div class="baidumap" id="allmap">
</div>

 

script:

  mounted () {
     this.baiduMap()
  },
  methods:{

      baiduMap () {
           var map = new window.BMap.Map('allmap')//创建地图

           map.enableScrollWheelZoom();启用滚轮放大缩小
           var point = new window.BMap.Point(114.12883, 22.688615)//设置地图位置
           map.centerAndZoom(point, 12)
           var marker = new  window.BMap.Marker(point)  // 创建标注
           map.addOverlay(marker)              // 将标注添加到地图中
      }
  }

 

style:

.baidumap{
  width: 500px;
  height: 200px;
  border: 1px solid red;
}