javascript - 如何将地理标记的 Flickr 照片添加到传单
问题描述
我正在尝试将 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 © ' + 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>
解决方案
问题是 url3 中缺少 &extras=geo%2C+url_s,并且需要在 Flickr api 字符串生成器中设置额外内容。
推荐阅读
- json - Elasticsearch 映射嵌套与平面。什么是更好的搜索类型?
- powershell - 基于类的 streamReader 和 xmlReader 锁定文件,函数不锁定
- asp.net-mvc - 如何在 mvc 的 httppostedfilebase 中提供扩展名?
- python - 如何在气流中使用 PythonVirtualenvOperator?
- reactjs - React路由器重定向页面但组件没有被渲染
- mysql - 归类 (latin1_swedish_ci,IMPLICIT) 和 (utf8mb4_general_ci,COERCIBLE) 的非法混合
- java - 如何解决这些异常并在 Wildfly 服务器上部署我的 Spring Boot 项目?
- python - 为什么我的产品不能完成冲洗方法?
- javascript - 如何将 Json 日期时间转换为普通日期时间格式(dd.mm.yyyy)?
- apache-spark - 如何将 ArrayType(StructType) 的 spark 数据框列拆分为 pyspark 中的多个列?