在Vue框架中使用百度地图

1、首先在index.html中引入百度地图

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

2、在组建中设置一个容器

<template>
  <div class="box">
    <div id="boxMap"></div>
  </div>
</template>

3、设置容器样式

.box{
    width: 100%;
    min-height: 800px;
}
#boxMap {
    width: 100%;
    min-height: 800px;
}

 

4、创建地图实例

export default {
data() {
      return {}
    },
    methods: {
      _getMapData() {
        let map = new BMap.Map("firePowerMap");  // 创建Map实例
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 12);
        map.setCurrentCity("北京"); // 地图显示的城市
        map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
        window.map = map;//将map变量储存在全局
        //****将map变量存储在全局，只有将地图储存在全局，别的方法才能取到
      }
}

必须要给容器设置高度！

必须把地图变量储存在全局！

转载于:https://www.cnblogs.com/xinchenhui/p/8984537.html