import { Controller } from "@hotwired/stimulus" import L from 'leaflet' import 'leaflet/dist/leaflet.css' import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; // import iconRetinaUrl from '../images/leaflet/marker-icon-2x.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; export default class extends Controller { static values = { latitude: Number, longitude: Number } init() { } connect() { delete L.Icon.Default.prototype._getIconUrl L.Icon.Default.mergeOptions({ // iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), // iconUrl: require('leaflet/dist/images/marker-icon.png'), // shadowUrl: require('leaflet/dist/images/marker-shadow.png') iconRetinaUrl: iconRetinaUrl, iconUrl: iconUrl, shadowUrl: shadowUrl, }); this.initializeMap() } initializeMap() { // 创建地图实例 this.map = L.map(this.element).setView( [this.latitudeValue, this.longitudeValue], 4 // 缩放级别 ) // 添加地图图层 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(this.map) // 添加标记 L.marker([this.latitudeValue, this.longitudeValue]) .addTo(this.map) .bindPopup(document.querySelector('h1').textContent) .openPopup() } disconnect() { if (this.map) { this.map.remove() } } }