效果图

1、创建一个容器 ；再给一个容器宽高

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

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

2、引入模块 并初始化底图 并挂载底图

<script>
// 引入依赖
// import proj from 'ol'
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ' //xyz
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 挂载
  mounted() {
    this.initMap()
  },
  methods: {

    // 初始化底图map
    initMap() {

      // 初始化地图
      const map = new Map({
        layers: [
          new TileLayer({
            visible: true,
            source: new XYZ({
              visible: true,
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            })
          })
        ],
        target: 'map',
        view: new View({
          center: [12914838.35,4814529.9],
          zoom: 8,
          maxZoom: 18,
          projection: 'EPSG:3857',
          constrainResolution: true,  // 设置缩放级别为整数 
          smoothResolutionConstraint: false,  // 关闭无级缩放地图
        }),
      });

 
    },

  }
}
</script>

全部代码

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

<script>
// 引入依赖
// import proj from 'ol'
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ' //xyz
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 挂载
  mounted() {
    this.initMap()
  },
  methods: {

    // 初始化底图map
    initMap() {

      // 初始化地图
      const map = new Map({
        layers: [
          new TileLayer({
            visible: true,
            source: new XYZ({
              visible: true,
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            })
          })
        ],
        target: 'map',
        view: new View({
          center: [12914838.35,4814529.9],
          zoom: 8,
          maxZoom: 18,
          projection: 'EPSG:3857',
          constrainResolution: true,  // 设置缩放级别为整数 
          smoothResolutionConstraint: false,  // 关闭无级缩放地图
        }),
      });

 
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* map容器撑开 */
#map {
  width: 100%;
  height: 100%;
}
</style>