同一页面上的多个传单地图具有相同的选项答案

【问题标题】：Multiple Leaflet maps on same page with same options同一页面上的多个传单地图具有相同的选项
【发布时间】：2014-08-13 18:32:29
【问题描述】：

我对 Leaflet.js 很陌生，我正在尝试弄清楚如何将具有相同选项和图层集的相同地图分配给不同的 HTML 容器，而不必每次都删除和添加一个新容器时间？

我曾经处理 Open layers 2.13，我有 map.render(div);每次我想将地图设置为另一个 div 时的选项。有没有类似的解决方案？非常感谢！

【问题讨论】：

标签： javascript openlayers leaflet

【解决方案1】：

可以，但必须复制图层

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add the same OpenStreetMap tile layer to the second map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);

http://jsfiddle.net/FranceImage/aj44r7v2/

【讨论】：

感谢您的回复！运行您的代码是否正确，我需要两个单独的 map 和 map2 声明以及两个不同的 div？我想这很好。我曾经只有一个地图声明，然后我将它传递给不同页面的不同 div（而不是创建多个地图）。
是的，你必须有 2 个具有不同 id 的 div。您必须创建 2 个地图对象，并且不能重复使用添加到地图中的图层。当我看到 Leaflet 的内部时，这对我来说似乎是合乎逻辑的（请记住，它是一个额外的轻量级库）
感谢您的回答。我无法将定义的图层添加到多个地图上，这对我来说是不合逻辑的。一旦我定义了图层的副本，一切正常。谢谢。

【解决方案2】：

复制硬代码的解决方案不尽如人意，当然要经过一个forEach循环。下面是一个完整的例子（使用 CDN 文件）：

'use strict'

const getLeaflet = (() => {
  const script = document.createElement('script')
  script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js')
  document.head.appendChild(script)
})()

const getMapStyles = (() => {
  const styles = document.createElement('link')
  styles.setAttribute('rel', 'stylesheet')
  styles.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css')
  document.head.appendChild(styles)
})()

const maps = (() => {
  document.querySelectorAll('.map').forEach(function(item){
    const id = item.id
    const map = () => {
      const el = document.getElementById(id),
            coords = JSON.parse(el.dataset.coords),
            map = L.map(id).setView(coords, el.dataset.zoom)
      L.tileLayer(
        el.dataset.tileserver,
        {attribution: el.dataset.attribution}
      ).addTo(map)
      let icon = L.icon({
        iconUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 512 512'%3E%3Cpath fill='%23E74C3C' d='M256 14C146 14 57 102 57 211c0 172 199 295 199 295s199-120 199-295c0-109-89-197-199-197zm0 281a94 94 0 110-187 94 94 0 010 187z'/%3E%3Cpath fill='%23C0392B' d='M256 14v94a94 94 0 010 187v211s199-120 199-295c0-109-89-197-199-197z'/%3E%3C/svg%3E", // @see https://codepen.io/tigt/post/optimizing-svgs-in-data-uris @see https://codepen.io/jakob-e/pen/doMoML
        iconSize: [40, 40],
        iconAnchor: [20, 40],
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
        shadowSize: [50, 70],
        shadowAnchor: [15, 70],
        popupAnchor: [0, -60]
      })
      L.marker(coords, {
        icon: icon
      })
        .bindPopup(el.dataset.name)
        .openPopup()
        .addTo(map)
    }
    window.addEventListener('load', function() {
      map()
    })
  })
})()

html 目标：

<div class="map" id="map" style="height: 50vh" data-name="Map 1" data-coords="[48.853133,2.349747]" data-zoom="15" data-color="#ff654f" data-tileserver="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoib2xpdmllcmMiLCJhIjoiY2s5dnNnZWoyMDIzNDNzb2Y1dmQ4MGNtMCJ9.m4U-wYcS4EPcKe9nVXIbUA" data-attribution="&lt;a href=&quot;//www.openstreetmap.org/&quot;&gt;OSM&lt;/a&gt; | &lt;a href=&quot;//www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;"></div>
<div class="map" id="map2" style="height: 50vh" data-name="Map 2" data-coords="[48.886719,2.343076]" data-zoom="10" data-color="#ff654f" data-tileserver="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoib2xpdmllcmMiLCJhIjoiY2s5dnNnZWoyMDIzNDNzb2Y1dmQ4MGNtMCJ9.m4U-wYcS4EPcKe9nVXIbUA" data-attribution="&lt;a href=&quot;//www.openstreetmap.org/&quot;&gt;OSM&lt;/a&gt; | &lt;a href=&quot;//www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;"></div>

在线示例：CodePen

【讨论】：