如何将带有地理标记的 Flickr 照片添加到传单答案

【问题标题】：How to add geotagged Flickr photos to leaflet如何将带有地理标记的 Flickr 照片添加到传单
【发布时间】：2020-04-10 08:05:44
【问题描述】：

我正在尝试将 Flickr 照片添加到简单的传单地图，但无法显示照片。地图显示了，但没有照片。当我运行https://www.flickr.com/services/api/explore/flickr.photos.search 来获取 api 字符串时，有一些照片。照片出现的代码部分在 showPhotos(map) 函数中。感谢您的帮助。

<!DOCTYPE html>
<html>

<head>

   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin="" />

   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""></script>
   <script src="js/leaflet-layerjson.min.js"></script>

   <title>
      Vancouver Map
   </title>

   <style>
      html,
      body,
      #map {
         height: 100%;
      }
      .leaflet-popup-content {
         width:auto !important;
      }
   </style>

   <script type="text/javascript">
      function init() {
         var osmLink = "<a href='http://www.openstreetmap.org'>OpenStreetMap</a>"
         var map = L.map('map').setView([49.248, -123.001], 12);
         L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
               attribution: 'Map data &copy; ' + osmLink,
            maxZoom: 20,
         }).addTo(map);
         showPhotos(map);
      }

      function showPhotos(map) {

         var url1 = "https://www.flickr.com/services/rest/?method=flickr.photos.search";
         var url2 = "&api_key=a0653f7892aa0bfe5cfe2a8ddb7e6fb4";
         var url3 = "&text=Vancouver&has_geo=1";
         var url4 = "&format=json&nojsoncallback=1";
         var url5 = "&api_sig=696831b748c5d43c8dedbab9935060e4";

         var popupContent = function (data,markers) {
            return "<strong>" + data.title + "</strong><br><img src='" + data.url_s + "'>" || null;
         };

         jsonLayer = new L.LayerJSON({
            url: url1 + url2 + url3 + url4 + url5,
            propertyItems: 'photos.photo',
            propertyLoc: ['latitude', 'longitude'],
            buildPopup: popupContent
         });
         map.addLayer(jsonLayer);
      }

   </script>
</head>

<body onload="init()">
   <div id="map"></div>

</body>

</html>

【问题讨论】：

标签： javascript html leaflet

【解决方案1】：

问题是 url3 中缺少 &extras=geo%2C+url_s，而且需要在 Flickr api 字符串生成器中设置额外内容。

【讨论】：