使用 popups

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

示例

TIP

点击矢量标记，会弹出提示框

新标签页预览

代码实现

<template>
  <div id="map" class="w-full h-96"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted, onUnmounted, ref } from "vue";
const map = ref(null);

onMounted(() => {
  // 创建地图实例
  map.value = L.map("map");
  // 添加瓦片图层(底图)
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
    map.value
  );

  // 创建弹窗
  const popup = L.popup();
  // 设置弹窗内容
  // openOn 方法将弹窗绑定到地图上，并立即打开它
  popup
    .setContent("A pretty CSS3 popup.<br> Easily customizable.")
    .setLatLng([51.505, -0.09])
    .openOn(map.value);

  // 添加矢量标记 到地图上，并绑定弹窗
  L.marker([51.505, -0.09]).addTo(map.value).bindPopup(popup).openPopup();
  // 添加圆
  L.circle([51.508, -0.11], 500, {
    color: "red",
    fillColor: "#f03",
    fillOpacity: 0.5,
  })
    .addTo(map.value)
    .bindPopup("我是圆")
    .openPopup();

  // 添加多边形
  L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047],
  ])
    .addTo(map.value)
    .bindPopup("我是多边形", { autoPan: true })
    .openPopup();

  // 设置地图中心点和缩放级别
  map.value.setView([51.505, -0.09], 13);
});

onUnmounted(() => {
  map.value.remove();
});
</script>

<style lang="scss" scoped>
:deep(.leaflet-control-attribution) {
  display: none;
}
</style>