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

Question

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

Ace*_*Ace 4 html javascript css maps leaflet

我想在地图中添加多个标记以精确定位以下坐标.

11.8166°N,122.0942°E
11.9804°N,121.9189°E
10.7202°N,122.5621°E
11.3889°N,122.6277°E
10.5929°N,122.6325°E

Answer 1

Svi*_*ica 20

你可以这样做:

希望能帮助到你 :)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<html>

<head>

  <title>Custom Icons Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

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

</head>

<body>

  <div id='map'></div>




</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我有 30k 个标记位置，当我按照您指定的方式绘制时，页面没有响应，您有什么解决方案吗 (3认同)
@AnkitKumar你需要问一个问题然后我们会看到我们能做些什么:) (2认同)
我认为使用“new”关键字是多余的，因为 L.marker 是一种[工厂方法](https://en.wikipedia.org/wiki/Factory_method_pattern)，请参阅文档：https://leafletjs.com/reference。 html#marker-l-标记 (2认同)

归档时间：	8 年，8 月前
查看次数：	7948 次
最近记录：	8 年，8 月前