Leaflet：同一頁面上的多個地圖

Question

我搜索過類似的問題，但沒有找到我的答案。 我想使用3個傳單地圖，每個都有不同的內容。 出現兩個問題：

僅顯示第一個。
縮放和縮放控件僅顯示在第三個控件中。

我附上了一個jsfiddle以防你可以提供幫助。

const mapbox = L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
});

mapbox.addTo(mapOne);
mapbox.addTo(mapTwo);
mapbox.addTo(mapThree);

https://jsfiddle.net/eunderbridge/3dq9j1ur/10/

謝謝：）

Answer 1

創建一個可重用的mapbox函數並每次傳遞map實例：

const mapbox = (map) => {
  return L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
  }).addTo(map)
};

[mapOne, mapTwo, mapThree].forEach(mapInstance => mapbox(mapInstance));

 const mapOne = L.map('mapOne', { zoomControl: false, maxZoom: 18, minZoom: 6, }).setView([40, -4], 6); const mapTwo = L.map('mapTwo', { zoomControl: false, maxZoom: 18, minZoom: 6, }).setView([40, -4], 6); const mapThree = L.map('mapThree', { zoomControl: false, maxZoom: 18, minZoom: 6, }).setView([40, -4], 6); // Add a tile layer to the map (Mapbox Streets tile layer) const mapboxToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; const mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={token}'; const mapboxAttribution = [ 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,', '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,', 'Imagery © <a href="http://mapbox.com">Mapbox</a>', ].join(" "); const mapbox = (map) => { return L.tileLayer(mapboxUrl, { id: 'mapbox.streets', token: mapboxToken, attribution: mapboxAttribution, }).addTo(map) }; [mapOne, mapTwo, mapThree].forEach(mapInstance => mapbox(mapInstance)); // Add a zoom control to the map const zoomControl = new L.Control.Zoom({ position: 'topleft' }); zoomControl.addTo(mapOne); zoomControl.addTo(mapTwo); zoomControl.addTo(mapThree); // Add a scale const scaleControl = L.control.scale({ maxWidth: 200, metric: true, imperial: false, position: 'bottomright' }); scaleControl.addTo(mapOne); scaleControl.addTo(mapTwo); scaleControl.addTo(mapThree); // Add a fullscreen control to the map (plugin) mapOne.addControl(new L.Control.Fullscreen()); mapTwo.addControl(new L.Control.Fullscreen()); mapThree.addControl(new L.Control.Fullscreen());

 #mapOne, #mapTwo, #mapThree { width: 80%; height: 500px; margin-top: 10px; }

 <!DOCTYPE html> <html class="main-panel"> <head> <meta charset="UTF-8"> <title>Turismo - Práctica </title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' /> </head> <body> <div class="cointainer-fluid" align="center"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div id="mapOne"> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div id="mapTwo"> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div id="mapThree"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script> </body>

Leaflet：同一頁面上的多個地圖

問題描述

1 個解決方案

解決方案1
1 已采納 2018-12-03 14:50:12

Leaflet：同一頁面上的多個地圖

問題描述

1 個解決方案

解決方案1 1 已采納 2018-12-03 14:50:12

解決方案1
1 已采納 2018-12-03 14:50:12