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>