基于标记的中心传单地图

Question

我是这方面的新手，但我找不到任何可行的解决方案来解决我的问题。 我想根据标记使地图居中。我找到了很多例子，但没有设法让它发挥作用。

有人可以帮我解决这个问题吗？

var startmarkers = [
  ['Paris', 48.8581817, 2.3454923, 0, './Paris/index.html', 'France'],
  ['London', 51.5097076, -0.1327514, 1, './London/index.html', 'UK'],
  ['Amsterdam', 52.3723963, 4.8954506, 2, './Amsterdam/index.html', 'Netherlands'],
  ['Brussels', 50.8455315, 4.3554069, 3, './Brussels/index.html', 'Belgium'],
];

var map = L.map('map').setView([49.2595092, 3.5204334], 6);
//var map = L.map('map').fitBounds(startmarkers.getBounds()); --- Not Working ---

mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

for (var i = 0; i < startmarkers.length; i++) {
  marker = new L.marker([startmarkers[i][1], startmarkers[i][2]])
    .bindPopup('<a href=\"' + startmarkers[i][4] + '\">' + startmarkers[i][0] + '<br>' + startmarkers[i][5])
    .addTo(map);
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

<div id="map" style="width: 1024px; height: 600px"></div>

Answer 1

您需要有一个数组，其中仅包含单个数组中每个标记的坐标（arrayOfLatLngs 数组）。 之后，创建一个边界并传递L.LatLngs 的数组 并最终适应地图上的界限：

var map = L.map('map').setView([49.2595092, 3.5204334], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var startmarkers = [
  ['Paris', 48.8581817, 2.3454923, 0, './Paris/index.html', 'France'],
  ['London', 51.5097076, -0.1327514, 1, './London/index.html', 'UK'],
  ['Amsterdam', 52.3723963, 4.8954506, 2, './Amsterdam/index.html', 'Netherlands'],
  ['Brussels', 50.8455315, 4.3554069, 3, './Brussels/index.html', 'Belgium'],
];



mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

let arrayOfMarkers = [];
for (let i = 0; i < startmarkers.length; i++) {
  marker = new L.marker([startmarkers[i][1], startmarkers[i][2]])
    .bindPopup('<a href=\"' + startmarkers[i][4] + '\">' + startmarkers[i][0] + '<br>' + startmarkers[i][5])
    .addTo(map);

  arrayOfMarkers.push([startmarkers[i][1], startmarkers[i][2]])
}
console.log(arrayOfMarkers)

/* var arrayOfMarkers = [
  [48.8581817, 2.3454923],
  [51.5097076, -0.1327514],
  [52.3723963, 4.8954506],
  [50.8455315, 4.3554069],
] */
var bounds = new L.LatLngBounds(arrayOfMarkers);
map.fitBounds(bounds);

<link href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
<div id="map" style="width: 600px; height: 600px"></div>