如何在Leaflet.js中添加多个标记？

Question

我想在地图上添加多个标记来标出以下坐标:

1. 11.8166° N，122.0942° E
2. 11.9804° N，121.9189° E
3. 10.7202° N，122.5621° E
4. 11.3889° N，122.6277° E
5. 10.5929° N，122.6325° E

- Carl Angelo Nievarez

---

这可能会有所帮助：https://dev59.com/OM9r0IgBFxS5KdRjG-Xe - Rajesh

Answer 1

你可以像这样做：

希望能帮到你 :)

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]
];

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

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

#map {
  width: 600px;
  height: 400px;
}

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

- Svinjica

---

我有30,000个标记位置，按照您指定的方式绘制时，页面会变得无响应，您有什么解决方案吗？ - sainanky

@AnkitKumar，您需要提出一个问题，然后我们将看看我们能为您做些什么 :) - Svinjica

感谢PennyLiu和Svinjica，救了我的一天！ - boldnik

我认为使用new关键字是多余的，因为L.marker是一个工厂方法，请参阅文档：https://leafletjs.com/reference.html#marker-l-marker - Akronix

@Akronix，TypeScript 还抱怨在这里使用 new："'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009)"。 :) - ScriptyChris