Vue + OpenLayers 实现高德地图的 4 种加载方式

前言：
高德地图是一款优秀的地图服务，而 Vue 和 OpenLayers 则分别是流行的前端框架和地图库。本文将介绍如何在 Vue 中使用 OpenLayers 加载高德地图，并提供了四种不同的加载方式供开发者选择。

一、基础设置
首先，在 Vue 项目中安装 OpenLayers：

npm install ol

接下来，创建一个 Vue 组件并引入 OpenLayers：

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

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'

export default {
  mounted() {
    const map = new Map({
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    })
  },
}
</script>

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

以上代码完成