Vue调用百度地图https支持http

Vue调用百度地图---静态数据:
http://lbsyun.baidu.com/
1、首先项目目录安装地图插件
npm install vue-baidu-map –save

2、public下的index.html引入地图和密钥( http支持https )
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=OLV2W7QHEE9btblyddTkBQBWhjXw030h"></script>

3、新建一个vue文件用来配置地图
<template>
  <div class="baidumap" id="allmap"></div>
</template>

<script>
export default {
  name: "pm-distribution",
  components: {},
  mounted() {
    this.baiduMap();
  },
  methods: {
    baiduMap() {
      var map = new BMap.Map("allmap"); // 创建地图实例

      var point = new BMap.Point(120.58379, 31.8675); // 创建点坐标
      map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      // map.setMapStyle({ style: "midnight" }); //地图风格

      var marker = new window.BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中

      //提示信息
      var infoWindow = new BMap.InfoWindow(
        "<p class = 'mapSize'>描述</p><br/>地址"
      );
      // 鼠标移上标注点要发生的事

      marker.addEventListener("mouseover", function() {
        this.openInfoWindow(infoWindow);
      });

      // 鼠标移开标注点要发生的事
      marker.addEventListener("mouseout", function() {
        //this.closeInfoWindow(infoWindow)
      });
    }
  }
};
</script>

<style>
.baidumap {
  width: 774px;
  height: 450px;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
.BMap_bubble_content {
  margin-top: 16px;
  line-height: 10px;
  color: #cc5522;
  font-size: 13px;
  font-weight: bold;
}
.mapSize {
  color: #999;
  font-size: 13px;
}
</style>
Vue调用百度地图https支持http

推荐阅读
