Question

我正在尝试通过 PHP 记录 Lopo 并使用坐标填充传单地图上的标记。

但是我在控制台中收到一个错误：

<块引用>

错误：无效的 LatLng 对象：（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输出是：

<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 然后您可以在创建后将地图移动/平移到标记：

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())

向地图添加多个标记

1 个答案: