Instagram 传单在地图上显示照片答案

【问题标题】：Instagram leaflet show photos on mapInstagram 传单在地图上显示照片
【发布时间】：2015-11-17 18:06:43
【问题描述】：

我目前正在尝试制作一张地图来显示我的 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。在我从此链接检查后，它也是正确的访问令牌

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

我做错了什么（或者你能猜到有什么问题吗？）

谢谢！

附：您可以在以下位置查看地图 http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html

附： 2.0 ...将其视为挑战...您可以制作自己的instagram吗？

【问题讨论】：

标签： javascript maps leaflet instagram instagram-api

【解决方案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，该 URL 向您提供包含访问令牌的数据，而不是身份验证端点。这可能意味着在初始化此插件之前获取访问令牌通过页面内部的某种方式，在https://instagram.com/developer/authentication/ 上列出了客户端隐式流

【讨论】：