在 Leaflet 中添加标记

Question

我是 JS 初学者。

我正在尝试使用 Leaflet 将地图添加到我的网站。我遵循了 Quick Start Guide，但添加标记似乎不起作用。

这是我的代码：

    <!-- JS Leaflet Map -->
    <script src="leaflet/leaflet.js"></script>
    <script> 
    var mymap = L.map('mapid').setView([40.174295, 44.522890], 11);

    var mymap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
    maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
    }).addTo(mymap);

    var marker = L.marker([40.174295, 44.522890]).addTo(mymap);

非常感谢您的帮助。

劳拉

Answer 1

这里有错误

var mymap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);

不要将结果赋给 mymap 变量

因此，下一行接收 Layer 而不是 Map 对象

var marker = L.marker([40.174295, 44.522890]).addTo(mymap);

所以，最终代码应该是这样的

<!-- JS Leaflet Map -->
<script src="leaflet/leaflet.js"></script>
<script> 
var mymap = L.map('mapid').setView([40.174295, 44.522890], 11);

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);

var marker = L.marker([40.174295, 44.522890]).addTo(mymap);

在 Leaflet 中添加标记

Adding markers in Leaflet

javascript

dictionary

markers

leaflet