map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers 示例</title>
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://openlayers.org/en/latest/build/ol.js"></script>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([109.5167, 18.2616]), // 三亚市吉阳区经纬度
                zoom: 12
            })
        });

        var marker = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([109.5167, 18.2616]))
        });

        var vectorSource = new ol.source.Vector({
            features: [marker]
        });

        var markerVectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        map.addLayer(markerVectorLayer);

        var overlayContainerElement = document.createElement('div');
        overlayContainerElement.className = 'ol-popup';
        var overlay = new ol.Overlay({
            element: overlayContainerElement,
            offset: [0, -10],
            positioning: 'bottom-center'
        });
        map.addOverlay(overlay);

        marker.on('click', function() {
            overlay.setPosition(marker.getGeometry().getCoordinates());
            overlayContainerElement.innerHTML = '吉阳区';
        });
    </script>
</body>
</html>