使用 JS 文件将首都城市标记添加到传单地图

Question

我在传单地图上创建了一个图层，并有一个 capitalCities.js 文件，我想用它向地图添加标记（capitalCities 文件的摘录如下）。

let capitals = [{"CountryName":"Somaliland","CapitalName":"Hargeisa","CapitalLatitude":"9.55","CapitalLongitude":"44.050000","CountryCode":"NULL","ContinentName":"Africa"},{"CountryName":"South Georgia and South Sandwich Islands","CapitalName":"King Edward Point","CapitalLatitude":"-54.283333","CapitalLongitude":"-36.500000","CountryCode":"GS","ContinentName":"Antarctica"},{"CountryName":"French Southern and Antarctic Lands","CapitalName":"Port-aux-FranÃƒÂ§ais","CapitalLatitude":"-49.35","CapitalLongitude":"70.216667","CountryCode":"TF","ContinentName":"Antarctica"},

解决此问题的最佳方法是什么？我正在考虑类似下面的 ajax 请求，但如何将其传递到传单图层地图中？我在 JS 文件的顶部声明了以下内容，但我想我已经看这个太久了：

让capitalCityLat；让 capitalCityLon;

ajax 请求如下所示，但我现在很困惑。

 $.ajax({
      url: "js/capitalCities.js",
      type: 'POST',
      dataType: 'json',
      data: {
          capital: $('CapitalLatitude', 'CapitalLongitude' ).val()   
      },
      success: function(result) {

非常感谢任何帮助或指导。

谢谢

Answer 1

向 Leaflet 地图添加标记的最简单方法如下：

L.marker([50.84673, 4.35247]).addTo(map);

在你的例子中，由于你试图根据 capitals 数组中的信息添加标记，你可能会这样做：

let capitals = [{"CountryName":"Somaliland","CapitalName":"Hargeisa","CapitalLatitude":"9.55","CapitalLongitude":"44.050000","CountryCode":"NULL","ContinentName":"Africa"},{"CountryName":"South Georgia and South Sandwich Islands","CapitalName":"King Edward Point","CapitalLatitude":"-54.283333","CapitalLongitude":"-36.500000","CountryCode":"GS","ContinentName":"Antarctica"},{"CountryName":"French Southern and Antarctic Lands","CapitalName":"Port-aux-FranÃƒÂ§ais","CapitalLatitude":"-49.35","CapitalLongitude":"70.216667","CountryCode":"TF","ContinentName":"Antarctica"}];


capitals.forEach(capital => {
   L.marker([capital.CapitalLatitude, capital.CapitalLongitude]).addTo(map);
})

如果您担心从另一个文件访问 capitals 数组，您可以在 index.html 中添加对该文件的引用，如 <script src="js/capitals.js"></script>。

并且 capitals 变量也可以在其他脚本中全局访问。

这里也有一个例子：https://codepen.io/dhruvs/pen/jOwVXKv

使用 JS 文件将首都城市标记添加到传单地图

Adding Capital City Markers to a Leaflet Map Using a JS File

javascript

ajax

leaflet

leaflet.markercluster