向 map 添加多個標記

Question

我正在嘗試通過 PHP 記錄 Lopo 並使用坐標填充 leaflet map 上的標記。

但是，我在控制台中遇到錯誤：

錯誤：無效的 LatLng object：（18.473396，未定義）

Php：

           <?php foreach($positions as $position):
                    $longitude = get_field( 'longitude', 'category_' . $position->term_id . '' );
                    $latitude = get_field( 'latitude', 'category_' . $position->term_id . '' );
            ?>
               <div class="marker" data-lat="<?php echo $latitude; ?>" data-lng="<?php echo $longitude; ?>"></div>
           <?php endforeach; ?>

上面的 html output 是：

<div class="marker" data-lat="33.985571" data-lng="18.470870"></div>
<div class="marker" data-lat="33.994995" data-lng="18.473396"></div>

JS

$(document).ready(function() {
    var 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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
    }).addTo(map);


var markers = [];
$.each($('.marker'), function () {
    var marker = [];
    var lat = $(this).attr('data-lat');
    var lng = $(this).attr('data-lng');
    marker = [lat, lng];
    markers.push( marker );
});

    for (var i = 0; i < markers.length; i++) {
        marker = new L.marker([markers[i][1], markers[i][2]]).bindPopup(markers[i][0]).addTo(map);
    }
});

Answer 1

數組從索引 0 開始。所以 lat = 0, lng = 1：

for (var i = 0; i < markers.length; i++) {
        marker = new L.marker([markers[i][0], markers[i][1]]).bindPopup(markers[i][0]).addTo(map);
}

也可以直接使用數組，因為數組只有lat和lng：

for (var i = 0; i < markers.length; i++) {
        marker = new L.marker(markers[i]).bindPopup(markers[i][0]).addTo(map);
}

平移到標記

將您的標記添加到L.FeatureGroup然后您可以在創建后將 map 移動/平移到標記：

var fg = L.featureGroup().addTo(map);
for (var i = 0; i < markers.length; i++) {
        marker = new L.marker(markers[i]).bindPopup(markers[i][0]).addTo(fg);
}
map.fitBounds(fg.getBounds())