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>