jQuery实现操作地图

83次阅读
没有评论

jQuery 本身并不能实现地图操作,但可以通过结合其他地图库和插件来实现。以下是一个使用 Leaflet.js 库和 Leaflet.markercluster 插件实现地图标注和聚类的完整 HTML 页面示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet Map with Marker Clustering</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/MarkerCluster.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/MarkerCluster.Default.css">
    <style>
        #map {
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/leaflet.markercluster.js"></script>
    <script>
        $(function() {
            var map = L.map('map').setView([39.906174, 116.391011], 13);
            var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
                maxZoom: 18
            }).addTo(map);

            var markers = L.markerClusterGroup();
            var data = [
                {lat: 39.906174, lng: 116.391011, name: '北京天安门'},
                {lat: 39.908715, lng: 116.397389, name: '王府井'},
                {lat: 39.913547, lng: 116.403326, name: '东单'},
                {lat: 39.926701, lng: 116.410549, name: '工体'},
                {lat: 39.975302, lng: 116.337900, name: '颐和园'}
            ];
            for (var i = 0; i < data.length; i++) {
                var marker = L.marker([data[i].lat, data[i].lng]).bindPopup(data[i].name);
                markers.addLayer(marker);
            }
            map.addLayer(markers);
        });
    </script>
</body>
</html>

这个示例使用了 Leaflet.js 库来创建地图,使用 OpenStreetMap 作为底图,并在地图上添加了多个标注。同时使用了 Leaflet.markercluster 插件来对标注进行聚类。页面中的 jQuery 库被用来初始化地图,在 document ready 时执行。

正文完
 
评论(没有评论)