Instagram传单在地图上显示照片

Question

我目前正在尝试制作一张地图来显示我的 Instagram 照片。

经过一些研究，我发现了这个 github 代表

https://github.com/turban/Leaflet.Instagram

在这里你可以准确地看到我想做什么。

http://turban.github.io/Leaflet.Instagram/examples/fancybox-cluster.html

所以你可以看到这个很棒的人说你必须更改代码中的这一行

L.instagram('instagram_api_url_with_access_token').addTo(map);

这是我对未加载照片的代码所做的更改。

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Instagram Popup</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:image" content="route.png" />
    <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
    <link rel="stylesheet" href="../dist/Leaflet.Instagram.css" />  
    <link rel="stylesheet" href="css/map.css" />
</head>
<body>
    <div id="map"></div>
    <script src="lib/reqwest.min.js"></script>
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="../dist/Leaflet.Instagram.js"></script>    
    <script>

    var map = L.map('map', {
        maxZoom: 3
    }).fitBounds([[59.22, 5.78], [59.28,5.89]]);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

    L.instagram('https://api.instagram.com/oauth/authorize/?client_id=51505b24ae5a47a38453a6c8e64ec102&redirect_uri=http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html&response_type=03b31b104b5b42bc9e643a5fb98a1c1c'
    ).addTo(map); 

    </script>
</body>
</html>

但它没有显示我的任何照片。

当然，我已经在 instagram api 中制作了一个应用程序，我已经输入了正确的客户端 ID 和 url 直接。在我检查此 link

之后，它也是正确的访问令牌

https://api.instagram.com/oauth/authorize/?client_id=51505b24ae5a47a38453a6c8e64ec102&redirect_uri=http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html&response_type=code

我做错了什么（或者你能猜出什么不对吗？）

谢谢！

P.S。你可以在 http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html

P.S。 2.0 ... 将其视为挑战...您可以制作自己的 Instagram 吗？

Answer 1

此插件只是从提供的 URL 加载 JSONP - 请参阅代码@https://github.com/turban/Leaflet.Instagram/blob/gh-pages/src/Leaflet.Instagram.js#L39

请注意，所提供的示例实际上并没有涉及 Instagram - 它们是针对 CartoDB 的。参见 https://github.com/turban/Leaflet.Instagram/blob/gh-pages/examples/popup.html#L27

你没有向它传递一个 URL 会踢回数据，你给它一个端点来开始身份验证流程（https://instagram.com/developer/authentication/）..这解释了为什么你有控制台中的 JS 错误抱怨试图解析 Instagram 的登录页面。

要开始这项工作，您需要直接向插件传递 URL，它会向您提供您想要的数据，其中包含您的访问令牌，而不是身份验证 endpoint.That 可能意味着抓取通过页面内的某种方式初始化此插件之前的访问令牌，客户端隐式流列在 https://instagram.com/developer/authentication/

Instagram传单在地图上显示照片

Instagram leaflet show photos on map

javascript

maps

leaflet

instagram

instagram-api