javascript - 如何在 Leaflet.js 中添加多个标记?

标签 javascript html css maps leaflet

我想在我的 map 上添加多个标记以精确定位以下坐标。

  1. 北纬 11.8166°,东经 122.0942°
  2. 11.9804° N,121.9189° E
  3. 10.7202° N, 122.5621° E
  4. 北纬 11.3889°,东经 122.6277°
  5. 10.5929° N, 122.6325° E

最佳答案

你可以这样做:

希望对您有所帮助:)

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>

关于javascript - 如何在 Leaflet.js 中添加多个标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42968243/

相关文章:

javascript - 如何限制文本框只能输入十六进制值

html - 使用 CSS 在链接末尾添加 >(大于)符号

javascript - 在鼠标悬停时显示带有淡入淡出效果问题的其他图像

javascript - 隐藏/显示隐藏的 div

html - CSS 两个边框。不同的高度

jquery - 当 contenteditable 从 true 设置为 false 时,哪些 css 属性会发生变化?

javascript - 获取 svg 的尺寸,包括笔划

javascript - 通过WebDriver在C#中执行Javascript文件

javascript - 调整游戏音乐的音量

javascript - 如何在node js中解压缩.prproj文件(premiere pro项目)?