向传单发行中添加标记

Question

这很可能是一个愚蠢的错误-但我找不到它：我的标记根本不会显示。有人知道这是怎么回事吗？ chrome开发者控制台中没有错误（实时网页带有以下代码段：https://gimoya.github.io/elba_trails/map.html）。

/*
Points of interest
*/

var POIs = {
    "type": "FeatureCollection",
    "name": "POIs",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
        { "type": "Feature", "properties": { "name": "Calendozio Minen", "description": "<a href=\"google.com\/maps\/search\/Calendozio Minen\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.433195000778694, 42.846563435712767 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Crepes 'I Sassirossi'", "description": "<a href=\"google.com\/maps\/search\/Bar & Crepes 'I Sassirossi'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.421687105111864, 42.859251223462977 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Ristorante 'La Piazza'", "description": "<a href=\"google.com\/maps\/search\/Bar & Ristorante 'La Piazza'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.401553011790016, 42.813766757348091 ] } },
        { "type": "Feature", "properties": { "name": "Aloe B & B Ranch Elba", "description": "<a href=\"google.com\/maps\/search\/Aloe B & B Ranch Elba\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.408682377036765, 42.811250255377345 ] } },
        { "type": "Feature", "properties": { "name": "PP 'Le Panche'", "description": "<a href=\"google.com\/maps\/search\/PP 'Le Panche'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.393229679804257, 42.808642183011926 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Mare - Magazzini", "description": "<a href=\"google.com\/maps\/search\/Ristorante Mare - Magazzini\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.358303702245937, 42.799840744001706 ] } },
        { "type": "Feature", "properties": { "name": "Bar Ristorante Le Palme - Bagnaia", "description": "<a href=\"google.com\/maps\/search\/Bar Ristorante Le Palme - Bagnaia\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.36372817884163, 42.810643588703883 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Stabilimento Mandel", "description": "<a href=\"google.com\/maps\/search\/Bar & Stabilimento Mandel\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.372453924676392, 42.732403377493846 ] } },
        { "type": "Feature", "properties": { "name": "Minimarkt Lacona & Bankomat", "description": "<a href=\"google.com\/maps\/search\/Minimarkt Lacona & Bankomat\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.313554269928702, 42.765188059048825 ] } },
        { "type": "Feature", "properties": { "name": "'Tratoria Orti di Mare'", "description": "<a href=\"google.com\/maps\/search\/'Tratoria Orti di Mare'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.309327836357474, 42.764830547047488 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Cacio & Vino", "description": "<a href=\"google.com\/maps\/search\/Ristorante Cacio & Vino\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.211601766564495, 42.751601080030852 ] } },
        { "type": "Feature", "properties": { "name": "Bar Spiaggia Cavolli", "description": null }, "geometry": { "type": "Point", "coordinates": [ 10.186399316735942, 42.73738496151384 ] } },
        { "type": "Feature", "properties": { "name": "Minimarkt Seccheto", "description": "<a href=\"google.com\/maps\/search\/Minimarkt Seccheto\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.176845708130028, 42.73769072758364 ] } },
        { "type": "Feature", "properties": { "name": "Panificcio Seccheto", "description": "<a href=\"google.com\/maps\/search\/Panificcio Seccheto\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.177415675024058, 42.737597700262853 ] } },
        { "type": "Feature", "properties": { "name": "Baba Pizza Pomonte", "description": "<a href=\"google.com\/maps\/search\/Baba Pizza Pomonte\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.1208601, 42.7486187 ] } },
        { "type": "Feature", "properties": { "name": "Mini Market Pomonte", "description": "<a href=\"google.com\/maps\/search\/Mini Market Pomonte\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.121819933812914, 42.748386473414676 ] } },
        { "type": "Feature", "properties": { "name": "Hotel & Bar Il Perseo Chiessi", "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Il Perseo Chiessi\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.113424194143604, 42.759005039240684 ] } },
        { "type": "Feature", "properties": { "name": "Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi", "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.117820207820397, 42.791279815618402 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Del Noce", "description": "<a href=\"google.com\/maps\/search\/Osteria Del Noce\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.167205994929112, 42.790316468951815 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria & Bar Bagni Paola Procchio", "description": "<a href=\"google.com\/maps\/search\/Pizzeria & Bar Bagni Paola Procchio\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.247504370542897, 42.789433590132184 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Locanda Cecconi Porto Azzurro", "description": "<a href=\"google.com\/maps\/search\/Osteria Locanda Cecconi Porto Azzurro\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398243648910684, 42.765950601670468 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria Da Giuseppe", "description": "<a href=\"google.com\/maps\/search\/Pizzeria Da Giuseppe\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.395422349335403, 42.765225325040845 ] } },
        { "type": "Feature", "properties": { "name": "Bar Alta Luna Porto Azzurro", "description": "<a href=\"google.com\/maps\/search\/Bar Alta Luna Porto Azzurro\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398409293393327, 42.765735721919597 ] } },
        { "type": "Feature", "properties": { "name": "Il Veliero Bar Marina di Campo", "description": "<a href=\"google.com\/maps\/search\/Il Veliero Bar Marina di Campo\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.236144660833816, 42.742844995518332 ] } }
    ]
}

for (i = 0; i < POIs.features.length; i++) { 
    new L.marker( POIs.features[i].geometry.coordinates )
            .bindTooltip('<h2>'+POIs.features[i].properties.name+'</h2>'+POIs.features[i].properties.description, 
                {
                    permanent: false, 
                    direction: 'right'
                }
            )
            .addTo(map);
    }

Answer 1

[不确定为什么对您不起作用。我使用了您的代码，对我来说似乎运行良好。这是一个工作示例：

Edit：根据Kay的说法，问题似乎出在他的示例中xy坐标已被交换。

<!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>



</head>

<body>



  <div id="map" style="width: 600px; height: 400px;"></div>
  <script>
    var POIs = {
      "type": "FeatureCollection",
      "name": "POIs",
      "crs": {
        "type": "name",
        "properties": {
          "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
      },
      "features": [{
          "type": "Feature",
          "properties": {
            "name": "Calendozio Minen",
            "description": "<a href=\"google.com\/maps\/search\/Calendozio Minen\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.433195000778694, 42.846563435712767]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar & Crepes 'I Sassirossi'",
            "description": "<a href=\"google.com\/maps\/search\/Bar & Crepes 'I Sassirossi'\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.421687105111864, 42.859251223462977]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar & Ristorante 'La Piazza'",
            "description": "<a href=\"google.com\/maps\/search\/Bar & Ristorante 'La Piazza'\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.401553011790016, 42.813766757348091]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Aloe B & B Ranch Elba",
            "description": "<a href=\"google.com\/maps\/search\/Aloe B & B Ranch Elba\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.408682377036765, 42.811250255377345]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "PP 'Le Panche'",
            "description": "<a href=\"google.com\/maps\/search\/PP 'Le Panche'\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.393229679804257, 42.808642183011926]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Ristorante Mare - Magazzini",
            "description": "<a href=\"google.com\/maps\/search\/Ristorante Mare - Magazzini\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.358303702245937, 42.799840744001706]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar Ristorante Le Palme - Bagnaia",
            "description": "<a href=\"google.com\/maps\/search\/Bar Ristorante Le Palme - Bagnaia\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.36372817884163, 42.810643588703883]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar & Stabilimento Mandel",
            "description": "<a href=\"google.com\/maps\/search\/Bar & Stabilimento Mandel\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.372453924676392, 42.732403377493846]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Minimarkt Lacona & Bankomat",
            "description": "<a href=\"google.com\/maps\/search\/Minimarkt Lacona & Bankomat\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.313554269928702, 42.765188059048825]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "'Tratoria Orti di Mare'",
            "description": "<a href=\"google.com\/maps\/search\/'Tratoria Orti di Mare'\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.309327836357474, 42.764830547047488]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Ristorante Cacio & Vino",
            "description": "<a href=\"google.com\/maps\/search\/Ristorante Cacio & Vino\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.211601766564495, 42.751601080030852]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar Spiaggia Cavolli",
            "description": null
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.186399316735942, 42.73738496151384]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Minimarkt Seccheto",
            "description": "<a href=\"google.com\/maps\/search\/Minimarkt Seccheto\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.176845708130028, 42.73769072758364]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Panificcio Seccheto",
            "description": "<a href=\"google.com\/maps\/search\/Panificcio Seccheto\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.177415675024058, 42.737597700262853]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Baba Pizza Pomonte",
            "description": "<a href=\"google.com\/maps\/search\/Baba Pizza Pomonte\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.1208601, 42.7486187]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Mini Market Pomonte",
            "description": "<a href=\"google.com\/maps\/search\/Mini Market Pomonte\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.121819933812914, 42.748386473414676]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Hotel & Bar Il Perseo Chiessi",
            "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Il Perseo Chiessi\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.113424194143604, 42.759005039240684]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi",
            "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.117820207820397, 42.791279815618402]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Osteria Del Noce",
            "description": "<a href=\"google.com\/maps\/search\/Osteria Del Noce\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.167205994929112, 42.790316468951815]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Pizzeria & Bar Bagni Paola Procchio",
            "description": "<a href=\"google.com\/maps\/search\/Pizzeria & Bar Bagni Paola Procchio\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.247504370542897, 42.789433590132184]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Osteria Locanda Cecconi Porto Azzurro",
            "description": "<a href=\"google.com\/maps\/search\/Osteria Locanda Cecconi Porto Azzurro\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.398243648910684, 42.765950601670468]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Pizzeria Da Giuseppe",
            "description": "<a href=\"google.com\/maps\/search\/Pizzeria Da Giuseppe\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.395422349335403, 42.765225325040845]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Bar Alta Luna Porto Azzurro",
            "description": "<a href=\"google.com\/maps\/search\/Bar Alta Luna Porto Azzurro\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.398409293393327, 42.765735721919597]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "name": "Il Veliero Bar Marina di Campo",
            "description": "<a href=\"google.com\/maps\/search\/Il Veliero Bar Marina di Campo\">Goolge Maps Search<\/a>"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [10.236144660833816, 42.742844995518332]
          }
        }
      ]
    }

    var map = L.map('map').setView([51.505, -0.09], 2);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(map);

    for (let i = 0; i < POIs.features.length; i++) {
      // console.log(POIs.features[i].properties.name)
      L.marker(POIs.features[i].geometry.coordinates)
        .bindTooltip('<h2>' + POIs.features[i].properties.name + '</h2>' + POIs.features[i].properties.description, {
          permanent: false,
          direction: 'right'
        })
        .addTo(map);
    }
  </script>



</body>

</html>