如何实现多个Leaflet JS地图

Question

我在为我网站上的所有地图定义多张地图时遇到了很多麻烦。使用代码我只有两张地图可以工作，其余的不会出现。我一直在寻找与我类似的问题，但我没有遇到任何问题。

目前我为地图创建 div 循环从我的数据库中获取 ID；

<div id="map_<?php echo $data['property']->property_id;?>">...

哪个输出；

<div id="map_1"></div>
<div id="map_2"></div>
<div id="map_3"></div>
<div id="map_4"></div>
...

那些 div 在不同的页面上。然后我在我的 .js 文件中定义地图，这是我认为我出错的地方，目前我有下面的代码。这是错误的做法吗？

  const mapInfo = [{
      // Aldea Beach House
      id: 'map_1',
      coords: [36.33, -5.24],
      zoom: 11
    },
    // Princess Kristina
    {
      id: 'map_2',
      coords: [36.345, -5.24],
      zoom: 11
    },
    // Duquesa Marina Apartment
    {
      id: 'map_3',
      coords: [36.35, -5.23],
      zoom: 11
    },
    // Duquesa Golf
    {
      id: 'map_4',
      coords: [36.34, -5.24],
      zoom: 11
    },
    // Footer Map
    {
      id: 'map_footer',
      coords: [36.367, -5.23],
      zoom: 11
    }
    ];
    const maps = {};
    mapInfo.forEach(({
    id,
    coords,
    zoom
    }) => {
    maps[id] = L.map(id).setView(coords, zoom);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1
  }).addTo(maps[id]);

  if (id === mapInfo[0].id) {
    L.marker([51.5, -0.09]).addTo(maps[id])
      .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
  }
})

更新

错误

  Uncaught Error: Map container not found.
      _initContainer Map.js:1103
      initialize Map.js:136
      i Class.js:22
      map Map.js:1728
     <anonymous> main.js:45
     <anonymous> main.js:40

Answer 1

如果您有地图 ID 或者可以从 php 代码中以某种方式提取它们，那么您可以创建一个关联数组来跟踪地图实例并避免通过遍历它们来复制粘贴相同的代码.

<!DOCTYPE html>
<html>

  <head>

<title>Quick Start - 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.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<style>
.marginRight {
  margin-right: 10px
}
</style>

  </head>

  <body>


<div style="display:flex; flex-direction: row;">


<div id="map_1" class="marginRight" style="width: 200px; height: 200px;"></div>
<div id="map_2" class="marginRight" style="width: 200px; height: 200px;"></div>
<div id="map_3" class="marginRight" style="width: 200px; height: 200px;"></div>
<div id="map_4" class="marginRight" style="width: 200px; height: 200px;"></div>
<div id="map_footer" class="marginRight" style="width: 200px; height: 200px;"></div>
<script>
  const mapInfo = [{
      // Aldea Beach House
      id: 'map_1',
      coords: [36.33, -5.24],
      zoom: 11
    },
    // Princess Kristina
    {
      id: 'map_2',
      coords: [36.345, -5.24],
      zoom: 11
    },
    // Duquesa Marina Apartment
    {
      id: 'map_3',
      coords: [36.35, -5.23],
      zoom: 11
    },
    // Duquesa Golf
    {
      id: 'map_4',
      coords: [36.34, -5.24],
      zoom: 11
    },
    // Footer Map
    {
      id: 'map_footer',
      coords: [36.367, -5.23],
      zoom: 11
    }
  ];
  const maps = {};
  mapInfo.forEach(({
    id,
    coords,
    zoom
  }) => {
    maps[id] = L.map(id).setView(coords, zoom);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1
    }).addTo(maps[id]);

    if (id === mapInfo[0].id) {
      L.marker([51.5, -0.09]).addTo(maps[id])
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    }
  })

</script>



  </body>

</html>

您甚至可以根据地图 ID 有条件地渲染内容。

你所做的并没有错，你只是重复使用了相同的代码块。我不确定这是否回答了你的问题，但你可以按照这种方法避免重写相同的代码块

如何实现多个Leaflet JS地图

How to implement multiple Leaflet JS maps

javascript

php

leaflet