vue + 百度地图

之所以写这篇博客，是因为我发现了神器，并且很好用，同时也被困扰了很长时间，所以希望遇到的小伙伴可以迎刃而解。

一步步来吧！

1.安装地图

npm install vue-baidu-map

2.在main.js中去引入

ak是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apicon

第一个找不到试试下面的这个：登录百度帐号

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{ak:'此处粘贴你的百度地图ak'})

3.在需要用到的页面也要引入一下，否则有问题

import { BmlMarkerClusterer } from "vue-baidu-map";

components: {
   
    BmlMarkerClusterer,
   
  },

4.可以展示代码

 <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="baidumap" id="allmap"></div>
              <baidu-map
                id="allmap"
                class="map"
                :scroll-wheel-zoom="true"
                :center="{ lng: 118.750034, lat: 31.9682 }"  
                ak="exaGSANITRIw3yrXPjGbGW8BBBuGW8Wc"
                :zoom="15"
              >
                <bm-marker
                  :position="{ lng: 118.750034, lat: 31.9682 }"
                  :dragging="true"
                  animation="BMAP_ANIMATION_BOUNCE"
                >
                  <bm-label
                    content="我的位置"
                    :labelStyle="{ color: 'red', fontSize: '24px' }"
                    :offset="{ width: -35, height: 30 }"
                  />
                </bm-marker>
              </baidu-map></div
          ></el-col>
 <el-row>

#allmap {
  height: 600px;
  width: 600px;
  // margin: 0 auto;
}
.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;
}

5.下面可能会有一个疑问？如何让图标默认显示自己想要的位置呢？

有一个比较好用的东西：https://www.bejson.com/convert/map/ 

主要靠的是经度纬度，这个东西就可以获取，点开网址你就明白了鸭！！！

把你想要的替换掉就阔以了！ 

我也有参考知乎的答案，但有点问题，上面已经做了改进！！！

快速上手Vue+百度地图 - 知乎