Vue Leaflet 是一個 Vue 組件，它使用 Leaflet 開源 JavaScript 庫來展示交互地圖。Leaflet 是一個輕量級的、適用于移動設備的 JavaScript 庫，它具有高度的自定義性、易維護性以及性能優良等特點。

在 Vue Leaflet 中，我們可以通過 Leaflet 提供的 API 來實現地圖上添加標記，熱點區域等功能。下面是一個簡單的 Vue Leaflet 的示例代碼：

<template>
<div id="mapid" style="height: 500px"></div>
</template>
<script>
import L from 'leaflet';
export default {
name: 'vue-leaflet-demo',
mounted () {
const map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a >OpenStreetMap</a> contributors, <a >CC-BY-SA</a>, Imagery ? <a ,
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: '<your access token>'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup();
}
}
</script>
<style>
/*@import url('https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css');*/
#mapid { width: 100% }
</style>

在示例代碼中，我們首先在 `