繁体   English   中英

向 map 添加多个标记

[英]Adding multiple markers to a map

我正在尝试通过 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);
    }
});

数组从索引 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())

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM