Question

我对 Leaflet 和编码非常陌生，我基本上只是想看看我是否可以构建具有不同功能的随机地图。我遇到了一个问题，需要帮助。

我无法向数组添加多段线（请参阅下面的尝试），其次，我无法使地图 fitBounds。

// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
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);
  
// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});

// Icons2
var myIcon2 = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});

// Locations
var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

// Locations 2
var locations2 = [
  ["LOCATION_1", 9.8166, 122.0942],
  ["LOCATION_2", 9.9804, 121.9189]
];

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

// Add markers2
for (var i = 0; i < locations2.length; i++) {
  marker = new L.marker([locations2[i][1], locations2[i][2]], {icon: myIcon2})
    .bindPopup(locations[i][0])
    .addTo(map);
}

// Add polyline (NOT WORKING)
var polyline = L.polyline([locations[i][1], locations[i][2]], {color: 'red'}).addTo(map);

// Zoom the map to the polyline (NOT WORKING)
map.fitBounds(polyline.getBounds());

这是一个小提琴：https://jsfiddle.net/Enounce/kcwngxe0/17/

提前致谢！

Answer 1

polyline 在循环之外，所以 i 将只取 locations2.length 的最后一个值，即 2

最好在 for 循环内部使用 let，这样你就不会在 for 循环块之外暴露局部 for 循环变量

此外，如果我理解正确，您想在每个位置数组的标记之间添加一条折线，locations 和 locations2

所以你需要有一个 latlngs 数组的数据格式，如下所示：

var locations2 = [
  [9.8166, 122.0942],
  [9.9804, 121.9189]
];

能够创建折线

您可以通过映射两个数组并返回一个只有纬度和经度的数组来获得它。

var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
  color: 'red'
}).addTo(map);

你可以对locations2数组做同样的事情

var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
      color: 'red'
    }).addTo(map);

最后要使用两条折线拟合边界，您可以简单地将两条折线实例放在一个要素组中，并使用 getBounds 方法获取其边界。

const featureGroup = L.featureGroup();

featureGroup.addTo(map);

featureGroup.addLayer(polyline);
featureGroup.addLayer(polyline2);

map.fitBounds(featureGroup.getBounds());

// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
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);

// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});

// Icons2
var myIcon2 = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});

// Locations
var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

// Locations 2
var locations2 = [
  ["LOCATION_1", 9.8166, 122.0942],
  ["LOCATION_2", 9.9804, 121.9189]
];

// Add markers
for (let i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]], {
      icon: myIcon
    })
    .bindPopup(locations[i][0])
    .addTo(map);

}

var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
  color: 'red'
}).addTo(map);

console.log(locations.map(location => [location[1], location[2]]))

// Add markers2
for (let i = 0; i < locations2.length; i++) {
  marker = new L.marker([locations2[i][1], locations2[i][2]], {
      icon: myIcon2
    })
    .bindPopup(locations[i][0])
    .addTo(map);
}

var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
  color: 'red'
}).addTo(map);

const featureGroup = L.featureGroup();

featureGroup.addTo(map)

featureGroup.addLayer(polyline)
featureGroup.addLayer(polyline2)



map.fitBounds(featureGroup.getBounds());

#map {
  height: 700px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<div id='map'></div>

将折线添加到传单中的标记数组

1 个答案: