vue+百度地图实现基本功能今天写一篇文章实现在vue2项目中引入百度地图，并实现一些简单的功能。先给一些基础的文档

今天写一篇文章实现在vue2项目中引入百度地图，并实现一些简单的功能。

先给一些基础的文档：百度地图文档地址 vue文档

一、vue项目初始化

简单建立了一个vue项目，新建了一个baiduMap的组件

根据百度地图的教程申请一个ak。

1.1vue-baidu-map引入

并没有使用这种方法，只是看到了，直接说一下，直接npm安装，然后使用时import引入即可。和用别的组件库应该没啥区别。

1.2直接引入

根据百度地图的教程，复制下面的代码。在vue项目的public文件夹下，找到index.html文件，然后复制粘贴

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
</script>

将上面ak改为你自己的ak。百度地图有很多版本，我用的是默认的GL版本的，想要其他版本的可以点击对应的连接进去，找到不同的教程。

打开之前创建的vue文件

<template>
  <div>
    <div class="map" id="container"></div>
  </div>
</template>

注意要给地图设置高度和宽度。

依旧参考百度地图的教程，在mounted中将上面的代码复制粘贴，创建一个地图实例。注意不要在created中创建。

mounted() {
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    this.map = map;
},

打开浏览器，就能看到一个简单的地图了

二、点击地图绘制覆盖物

2.1点击事件

根据官网，地图的点击事件是这样的，它的回调函数的e，将它输出，可以看到经纬度信息，我们得到经纬度后，就可以根据point绘制覆盖物了。这样绘制的覆盖物就是默认的样式，一个红色的标记。

map.addEventListener('click', function(e) {
        console.log(e);
        alert('click!')
});

2.2绘制marker

 map.addEventListener("click", function (e) {
      console.log(e);
      let point = e.latlng;
      var marker = new BMapGL.Marker(point); // 创建标注
      map.addOverlay(marker);
 });

如果想让标记物是其他自定义图片，那么可以创建一个icon，在icon中可以自定义图片地址，然后在marker中传入这个icon。

2.3图标点击打开信息窗口

百度地图的点击事件都可以用addEventListener获取到。之前地图点击，就是map.addEventListener,现在是marker,就在创建的marker实例上获取。event.domEvent.stopPropagation()阻止冒泡，不然点击地图上的图标时，同时会触发父元素map上绑定的点击事件。

    let self = this;
    map.addEventListener("click", function (e) {
      console.log(e);
      let point = e.latlng;
      var marker = new BMapGL.Marker(point); // 创建标注
      marker.addEventListener("click", () => {
        self.openWindow(point);
        event.domEvent.stopPropagation();
      });
      map.addOverlay(marker);
    });

在methos中定义一个openWindow方法。

methods: {
    openWindow(point) {
      console.log(point,'pppp');
    },
 },

关于信息窗体，参数可以传入一个string，也一个创建一个HTMLElement。比较复杂的方法是，在vue里创建一个组件，然后再把这个组件转化为html，之前写过一篇高德的（链接）百度这里也差不多，今天这里简单一点，就直接写了。

openWindow(point) {
      const content = `<div>经纬度：${point.lat}、${point.lng} </div>`;
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
      };
      const infoWindow = new BMapGL.InfoWindow(content, opts);
      this.map.openInfoWindow(infoWindow, point);
 },

三、删除覆盖物

删除覆盖物，直接用removeOverlay(overlay:Overylay)即可。我们做得复杂一点，在信息窗体中加一个按钮，点击按钮删除。在data里定义一个要删除的marker变量和窗体变量

 data() {
    return {
      map: null,
      currentMarker: null,
      infoWindow:null
    };
  },

methods中增加一个删除的方法。删除标记物时将信息窗体也关闭

delMarker() {
   this.map.removeOverlay(this.currentMarker);
   this.map.closeInfoWindow(this.infoWindow);
},

mounted中绑定

 window.delMarker = this.delMarker;

将之前的代码修改一下

 map.addEventListener("click", function (e) {
      console.log(e, 1111);
      let point = e.latlng;
      var marker = new BMapGL.Marker(point); // 创建标注
      marker.addEventListener("click", (event) => {
        self.openWindow(point, marker);
        event.domEvent.stopPropagation();
      });
      map.addOverlay(marker);
    });

 openWindow(point, marker) {
      this.currentMarker = marker;
      const content = `<div>经纬度：${point.lat}、${point.lng} <div>
        <button onclick='delMarker()' >删除</button>
        </div>  </div>`;
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
      };
      const infoWindow = new BMapGL.InfoWindow(content, opts);
      this.infoWindow = infoWindow
      this.map.openInfoWindow(infoWindow, point);
  },

简单实现了功能

vue+百度地图 实现基本功能