一、安装百度地图插件：
npm install vue-baidu-map –save
二、在vue项目首页index.html进入插件：
注:src里的http必须要写如果不写会出现bug! ! !
没有秘钥可以点击http:// /apiconsole/key进去获取
<script type="text/javascript" src="http://api./api?v=2.0&ak=你申请的秘钥"></script>
三、下面开始写核心代码：
<template><div class="baidumap" id="allmap"></div></template></script><script>export default {mounted() {this.baiduMap()},methods: {baiduMap() {let map = new BMap.Map('allmap');let point = new BMap.Point(115.043096, 38.592132) //创建点坐标map.centerAndZoom(point, 12) //初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl()) //地图控柄map.addControl(new BMap.ScaleControl()) //实际距离显示map.addControl(new BMap.OverviewMapControl())// map.setMapStyle({ style: 'midnight' }) //地图主题let marker = new window.BMap.Marker(point); //创建柱标map.addOverlay(marker) //将标注添加到地图中//提示信息var infoWindow = new BMap.InfoWindow('提示信息')// 鼠标移上标注点要发生的事marker.addEventListener('mouseover', function() {this.openInfoWindow(infoWindow)})// 鼠标移开标注点要发生的事marker.addEventListener('mouseout', function() {this.closeInfoWindow(infoWindow)})console.log(marker)}}}</script><style >.baidumap {width: 1000px;height: 500px;border: 1px solid red;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}/* 删除百度地图版权字 与 百度logo */.baidumap>.BMap_cpyCtrl {display: none !important;}.baidumap>.anchorBL {display: none !important;}</style>
四、百度地图其他new BMap.Map()相关API：
/cms/jsapi/reference/jsapi_reference.html#a0b0
五、最终效果：
CSDN社区 《创作达人》活动，只要参与其中并创作文章就有机会获得官方奖品：精品日历、新程序员杂志，快来参与吧！链接直达 /topics/605272551
