Javascript 在网站的不同页面中显示不同的地图_Javascript_Leaflet_Maps

Javascript 在网站的不同页面中显示不同的地图

javascript leaflet maps

Javascript 在网站的不同页面中显示不同的地图,javascript,leaflet,maps,Javascript,Leaflet,Maps,所以，我是一个新手，我尝试在我的网站的两个不同页面上展示两个不同的传单地图，即A页的地图1和B页的地图2 如果我在同一页中同时显示map1和map2，效果会很好，但是当我尝试在一页中显示每一个时，第二个就不会出现有人能帮我吗？多谢各位我的网站第二页代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

所以，我是一个新手，我尝试在我的网站的两个不同页面上展示两个不同的传单地图，即A页的地图1和B页的地图2

如果我在同一页中同时显示map1和map2，效果会很好，但是当我尝试在一页中显示每一个时，第二个就不会出现

有人能帮我吗？多谢各位

我的网站第二页代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="app/scss/style.css">
  <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>
  
  <title>Circuit A - Predefined Circuits</title>

  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: #ffffff; }
  </style>

</head>

<body>
   

  <header class="header">
    <div class="overlay has-fade"></div>
    
    <nav class="container flex flex-jc-sb flex-ai-c">
      <a href="index.html" class="header__logo hide-for-mobile">
        <img src="images/logo_desktop.png" alt="POCITYF"/> 
      </a>

      <a href="index.html" class="header__logo hide-for-desktop">
        <img src="images/logo_mobile.png" alt="POCITYF"/> 
      </a>

      <a id="btnHamburger" href="#" class="header__toggle hide-for-desktop">
        <span></span>
        <span></span>
        <span></span>
      </a>

      <div class="header__links hide-for-mobile">
        <a href="index.html">Home</a><a href="network.html">Network</a><a href="predefined_circuit.html"><b>Predefined Circuit</b></a><a href="create_circuit.html">Create Circuit</a><a target="blank" href="https://www.evoraticket.pt/OBilhete.aspx">Tickets</a><a target="blank" href="https://pocityf.eu/">About</a>
      </div>

      <!-- <a href="#" class="button header__cta hide-for-mobile">Request Invite</a> -->
    </nav>

    <div class="header__menu has-fade">
      <a href="index.html">Home</a>
      <a href="network.html">Network</a>
      <a href="predefined_circuit.html"><b>Predefined Circuit</b></a>
      <a href="create_circuit.html">Create Circuit</a>
      <a target="blank" href="https://www.evoraticket.pt/OBilhete.aspx">Tickets</a>
      <a target="blank" href="https://pocityf.eu/">About</a>
    </div>

  </header>
<!-- Editar para baixo -->

<section class="bar container--images"></section>
<section class="info_circuits">

    
...

      <section class="info_circuits__map">
            <section class="maps">
 
            <div id="mapcircuit"></div>
           </section>
          </section>
      
</section>  
 ...

<!--<div class="attribution">
    Coded by <a href="#">UNINOVA</a>
  </div> -->
  
  <script src="app/js/script.js"></script>
  
  <script src="app/js/map_circuita.js"></script>
</body>
</html>


回路A-预定义回路
.attribute{字体大小：11px；文本对齐：居中；}
.属性a{color:#ffffff；}
...
...

maps.js的代码

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapid').setView([38.57156160678178, -7.908692129122894], 16);

// 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 a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
    iconUrl: 'images/position.png',

    iconSize:[60, 40], // size of the icon
    iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)

    .bindPopup('Casa')

    
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapcircuit').setView([38.57156160678178, -7.908692129122894], 16);

// 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 a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
    iconUrl: 'images/position.png',

    iconSize:[60, 40], // size of the icon
    iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)

    .bindPopup('Casa')

//在“map”div中创建地图，将视图设置为给定位置并缩放
var map=L.map（'mapid'）.setView（[38.57156160678178，-7.908692129122894]，16）；
//添加OpenStreetMap平铺层
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//在给定位置添加一个标记，附加一些弹出内容，然后打开弹出窗口
var greenIcon=L.icon({
iconUrl:'images/position.png'，
图标大小：[60,40]，//图标的大小
iconAnchor:[30，40]，//将对应于标记位置的图标点
});
标记（[38.57266152778955，-7.907425130974091]，{icon:greenIcon}）.addTo（地图）
.bindpoop（'Casa'）
//在“地图”分区中创建地图，将视图设置为给定位置并缩放
var map=L.map（'mapcircuit'）.setView（[38.57156160678178，-7.908692129122894]，16）；
//添加OpenStreetMap平铺层
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//在给定位置添加一个标记，附加一些弹出内容，然后打开弹出窗口
var greenIcon=L.icon({
iconUrl:'images/position.png'，
图标大小：[60,40]，//图标的大小
iconAnchor:[30，40]，//将对应于标记位置的图标点
});
标记（[38.57266152778955，-7.907425130974091]，{icon:greenIcon}）.addTo（地图）
.bindpoop（'Casa'）

将地图实例命名为不同的名称：

是javascript文件

map\u circuita.js

的名称，而不是

map.js

？因为

？

请分享你的代码。但是我认为你放弃了在第二页中添加导入的

sloop.js

和

sloop.css

，我在第二页的代码上面分享了我的第二页。你的javascript定义了第二张地图在哪里？我在页面末尾调用javascript文件file:maps.js。maps.js的代码现在被添加到原始帖子中。（对不起，我是新手）：）非常感谢！成功了！是的。。。我在js文件中使用了错误的名称。

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapid').setView([38.57156160678178, -7.908692129122894], 16);

// 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 a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
    iconUrl: 'images/position.png',

    iconSize:[60, 40], // size of the icon
    iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)

    .bindPopup('Casa')

    
// create a map in the "map" div, set the view to a given place and zoom
var mapcircuit= L.map('mapcircuit').setView([38.57156160678178, -7.908692129122894], 16);

// 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(mapcircuit);

// add a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
    iconUrl: 'images/position.png',

    iconSize:[60, 40], // size of the icon
    iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(mapcircuit)
    .bindPopup('Casa')

<div id="mapcircuit" style="height:100%; width:100%"></div>