javascript - 传单:同一页上的多个 map-6ren

javascript - 传单:同一页上的多个 map

转载作者：行者123 更新时间：2023-11-29 15:11:58

24

4

我已经搜索过类似的问题，但没有找到适合我的案例的答案。我想使用 3 张传单 map ，每张都有不同的内容。出现两个问题:

只显示第一个。
比例和缩放控件仅在第三个中显示。

我附上了一个 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/

谢谢你:)

最佳答案

创建一个可重用的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>

关于javascript - 传单:同一页上的多个 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53594814/

24

4

0

文章推荐： android - 如何使用 ListView 创建视频 View ？安卓

文章推荐： android - 当我尝试下载 zip 文件时，getContentLength 返回 -1

文章推荐： javascript - 如何将文件导入范围样式标签而不会流血？

传单 - 如何在拖放时匹配标记和折线
我有一个带有 LeafletJS 的项目。例如，我在 map 中有 2 个点 (A, B)。我将其显示为 2 个标记我必须画一条从 A 到 B 的折线。我移动了标记 A，我想将标记 A 的折线的
传单:如何将文本标签添加到自定义标记图标？
是否可以向自定义图标标记添加文本？我想避免在图像编辑器中编辑图标只是为了添加文本。我已经像这样创建了我的自定义图标标记: var airfieldIcon = L.icon({ ic
传单 - 图层和子图层
我想要一个 Leaflet 图层控件，选中/取消选中时必须显示/隐藏主图层内的所有子图层。我还想独立检查/取消选中子层。我浏览了 Leaflet 文档和论坛，但找不到任何引用资料。我应该为此编写一个自
传单:如何处理重叠的线条？
如何处理 Leaflet map 库中的重叠线？我从服务器 sid 下载 geoJSON 并将其绘制到 map 上。如果有两个相同的条目，Leaflet 会绘制它们两次。这可以通过在服务器端查找完全
leaflet - 如何检测用户何时没有点击图层？传单
我在项目中使用 leafletjs。在 map 上我有几个多边形和标记。当其中一个被点击时，所有这些都有一个点击事件来显示一些信息。如果用户单击 map 的“空白”部分(而不是任何多边形或标记)，我想
javascript - 传单:按缩放级别获取缩放的边界框
我正在尝试对下一个边界的外观做出预测。这是一个plunkr: https://plnkr.co/edit/sk6NRh51WZA2vpWP 这就是我让它工作的方式，但它不是很有效: const ori
map - 传单 - 添加图例标题
我是 Leaflet 的新手，目前我正在努力学习教程。到目前为止，我设法创建了一个交互式 clorophet map ，就像示例中的 http://leafletjs.com/examples/cho
r - 传单::映射错误的国家名称
我很难弄清楚为什么我无法在 map 上绘制正确的国家/地区。我已经完成了所有代码，但我仍然不明白为什么不能正常工作。如果您看到任何问题，请告诉我。我很欣赏。这是数据集 Country
javascript - 传单:是否可以自定义缩放级别？
是否可以在使用 Stamen Toner-lite tiles 的 Leaflet map 上设置中间(2.5、3.5、4.5 等)缩放级别？ ?这是我到目前为止计算缩放级别的代码: leafletm
R 传单。将点数据分组到单元格中以汇总许多数据点
早上、下午或晚上。我有以下位置数据(从'Count of sampling points within a grid cell'调整) # Demo data set.seed(123) # lat
javascript - 单击标记后如何拖动它？传单
大家好，我正在开发一个具有 map 功能的网站。我的目标是，如果您单击标记，则使其拖动。这是我的代码 else if (select1.value === "Arson"){ var note =
javascript - 传单-可能捕获应用程序引发的异常
我正在开发一个应用程序，用户可以在其中上传KML文件，并使用Leaflet，toGeoJSON和Angular-Leaflet-Directive在屏幕上呈现路径。我使用toGeoJSON.kml(
svg - 传单-多色图案填充
我需要在多边形要素中实现多色填充。填充将根据要素属性进行有条件的格式化。假设我需要一个具有 3 色图案的多边形，如下所示: let fillPalette = ['orange', 'green',
javascript - 传单 - 如何使用弹出表单中的数据创建标记
我从 javascript 开始，并试图解决这个问题。我希望当用户单击 map 时出现一个表单。当他们填写表单时，我想在该位置创建一个标记，并将该标记的弹出内容设置为表单中的值。添加表单完成后，我还
javascript - 如何通过弹出窗口获取在geoserver中发布的wms图层的属性信息。传单
我已经在地理服务器中发布了一个功能，我可以通过传单及其 basemap 成功访问该功能。现在我需要在弹出窗口中获取feature onclick的属性信息。我按原样使用了示例( https://gi
javascript - 传单:通过点击功能缩放到标记
我正在使用带有一些标记的传单 map 。我还有一个侧边栏，可以在其中看到标记的名称，如果单击标记的名称， map 将缩放到标记的 lnglat。它已经可以工作，但我的问题是，当我刷新页面并在侧边栏中选
传单 - Fitbounds 并保持中心位置
我正在使用 Leaflet 和 Mapbox，我想设置 map 的 View : 所有标记均可见中心设置为特定点使用 setView 和 fitbounds 单独完成每个点很容易，但我不知道如何同
传单 map 来源
是否有所有潜在 map 源的列表？在示例页面上，可以浏览四种类型的 map 。外面还有什么？ http://tombatossals.github.io/angular-leaflet-directi
javascript - 传单:不同坐标的不同颜色标记
我正在使用 Leaflet 制作交互式 map 。我在 map 上有标记(基于其经度和纬度坐标)，并且我希望某些标记具有与其他标记不同的颜色。例如，某些坐标我给它的分数是“10”，我希望它是粉红色的，
javascript - 传单 - 如何更改抓取手形光标？
我可能忽略了如何在 map 上更改 LeftletJS 的光标。 http://leafletjs.com/reference.htm 我尝试设置map_div.style.cursor = 'cro

首页

博学

6Ren·AI

商城

javascript - 传单:同一页上的多个 map