vue-admin-element 整合百度地图实现地图标记

vue-admin-element 整合百度的地图实现地图标记

因为项目的需求，老板要求我们在首页做一个联系我们的界面，里面包含地图信息和联系人的基本信息。且这边的地图不是一张图片。上博客看各位博主的各种方法但是就是还原不出来！或许是我太菜了吧，没办法只能硬着头皮看开发手册！！！

1、效果图

先看一下我做出来的效果图，如果正合您的胃口那么请您悉心看完，你也可以做出一样的来！！！！

2、首先申请一个百度地图的ak（密钥）

申请地址： https://lbsyun.baidu.com/apiconsole/cente

第一步：

第二步：复制AK到项目中

3、回到vue项目

第一步：

<template>
<div id="allmap"></div>
</template>

第二步：

<srcipt>
let BMap = {} //声明在最外面调用的时候就可以不用this

export default {

  data() {
    return {
      map: {},
      infoWindow:{}
    }
  },

  mounted() {
    this.loadJScript()
    setTimeout(() => {
      this.addMarker()
    }, 500)//做一个延迟的处理显示
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    loadJScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = '//api.map.baidu.com/api?v=2.0&ak=zLLKUwyfOtq8XWdzGhIugCia5fKiRPEd' //这里有坑
      script.onload = () => {
        this.init()
      }
      document.body.appendChild(script)
    },
    init() {
      // 百度地图API功能
      let BMap = window.BMap
      this.map = new BMap.Map('allmap')    // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(113.30654978988578, 23.139209965161754), 17)  // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity('广州')          // 设置地图显示的城市 此项是必须设置的
      this.map.enableScrollWheelZoom(true)     //开启鼠标滚轮缩放
    },
    addMarker() {
      let BMap = window.BMap
      let icon = new BMap.Icon(require("@/assets/static/image/carousel/xh.jpeg"),new BMap.Size(50,50))
      icon.setImageSize(new BMap.Size(50,50))
      var marker = new BMap.Marker(new BMap.Point(113.30654978988578, 23.139209965161754),{
        icon
      }) // 创建点
      this.map.addOverlay(marker) //添加点

			//创建标注，自定义标记的点
      var point = new BMap.Point(113.30654978988578, 23.139209965161754)
      var marker = new BMap.Marker(point)  // 创建标注
      this.map.addOverlay(marker)              // 将标注添加到地图中
      this.map.centerAndZoom(point, 17)
     
     //自定义信息窗口显示的信息
      var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: '广东省哈哈哈责任有限联盟', // 信息窗口标题
        enableMessage: true,//设置允许信息窗发送短息
        message: '广东省广州市荔湾区东风东路888号'
      }
      var infoWindow = new BMap.InfoWindow(
        "地址：广东省广州市荔湾区东风东路888号",
        opts
      );//创建地址
      //为信息窗口显示添加监听事件
      marker.addEventListener("click",function() {
        this.map.openInfoWindow(infoWindow,point) //开启信息窗口
      });
    }

  }

}
</script>

注意：你做到这边的时候你会碰到这么一样的错误，那么请你及时改过来即可！！！
替换后

这样的设置之后就可以正常的显示了！！！，因为我这个方法使用的是异步加载的情况只有在加载地图的时候才会加载，而不同于其他人的方法在index.html架加载地址。然后看警告信息他说不能用这个地址，你得用他给的那么我们就可以直接拿过来换掉就可以了。
如果说你还想把这个百度地图搞得更加个性的话那么你可以查看百度地图的参考手册 https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a1b0

4、 搞定收工！！！