传单显示多个标记和 setView答案

【问题标题】：Leaflet show multiple markers and setView传单显示多个标记和 setView
【发布时间】：2020-04-09 22:27:41
【问题描述】：

我有使用Leaflet 和open street map 的示例代码。不过，我不确定如何添加更多markers。此外，我并不真正理解setView 函数的意义，我读到它是为centering map 设计的，但是拥有它有什么意义，因为只有一个marker 应该自动作为map 中心点，另一方面，如果会有更多的标记，那么setView是什么意思？

附加问题： Leaflet 和 open street map 是否可免费用于商业用途？

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>

<body>
<div id="mapDiv" style="width: 800px; height: 500px"></div>
<script>
    // position we will use later
    var lat = 40.73;
    var lon = -74.00;

    // initialize map
    map = L.map('mapDiv').setView([lat, lon], 13);

    // set map tiles source
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18,
    }).addTo(map);

    // add marker to the map
    marker = L.marker([lat, lon]).addTo(map);

    // add popup to the marker
    marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();

</script>
</body>

</html>
</pre>

【问题讨论】：

标签： leaflet openstreetmap

【解决方案1】：

只有一个标记应该自动作为地图中心点

Leaflet 本身没有任何内容可以自动将地图视图居中放置在您唯一的标记上。

另一方面，您展示的示例代码确实实现了这一点，在与您唯一的标记相同的坐标上使用 setView。

如果会有更多的标记，setView 是什么感觉？

setView 使您能够独立于地图内容/图层（在您的情况下：标记）定义要在视口中初始显示的地图部分。显然，您也可以定义一个同时显示所有标记的视图。

我不确定如何添加更多标记。

L.marker([lat, lon]).addTo(map); 根据需要多次执行，lat 和 lon 根据需要每次不同。

传单和开放街道地图是否免费用于商业用途？

传单以BSD 2-clause license 分发，允许用于商业用途。

OpenStreetMap 数据是免费的，但 不是 OSM 服务器生成的图块。有许多服务从 OSM 数据或您可以查看的其他来源生成类似的图块。例如。您可以搜索“传单提供者”。

【讨论】：

我不太明白。我在我的代码中使用什么磁贴提供程序？例如，哪个磁贴提供商可以免费用于商业用途，我应该更改我的代码的哪一部分？
Leaflet 教程和“leaflet-providers”插件应该有助于澄清您的理解。
你能举个例子或者把我重定向到正确的地方吗？正在搜索，但没有找到