Use vue to develop the attention of the map class system.

1. Objects that should be created with maps use less vue data and computed attributes to store data or vuex.

Why should we pay attention to this problem?

<template>
  <div ref="mapView" class="map-view">
    <!-- Popup -->
    <div ref="popup" class="ol-popup">
      <a @click="popupcloser" class="ol-popup-closer"></a>
      <div class="ol-popup-content" v-html="popupContent"></div>
    </div>
  </div>
</template>

import "ol/ol.css";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import ol from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
//Map variables
let map = null;
// Variables for Overlay new
let popup;
export default {
  data() {
    return {
      //
      popupContent: ""
    };
  },
  computed: {},
  methods: {
    init() {
      this.initMap();
      this.initPopup();
    },
    initMap() {
      console.log("map");
      map = new Map({
        target: this.$refs.mapView,
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://mt{0-3}.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile"
            })
          })
        ],
        view: new View({
          center: [-472202, 7530279],
          zoom: 12
        })
      });
    },
    initPopup() {
      // Vienna marker
      popup = new Overlay({
        positioning: "bottom-center",
        element: this.$refs.popup,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [-140 + 48, 0]
      });
      console.log(popup);
      map.addOverlay(popup);
      map.on("singleclick", evt => {
        var coordinate = evt.coordinate;
        this.popupContent = "<p>You clicked here:</p><code>6666</code>";
        popup.setPosition(coordinate);
      });
    },
    initData() {},
    popupcloser() {
      popup.setPosition(undefined);
      //   closer.blur();
      return false;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};

.map-view {
  width: 100%;
  height: 100%;
  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 140px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 140px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    &:hover {
      cursor: pointer;
      color: #f00;
    }
  }
  .ol-popup-closer:after {
    content: "✖";
  }
}