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。在我从此链接检查后，它也是正确的访问令牌

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，它会为您提供包含访问令牌所需的数据，而不是身份验证端点。这可能意味着在初始化此插件之前抓取访问令牌通过页面内部的某些方式，https://instagram.com/developer/authentication/

上列出了客户端隐式流程

Instagram传单在地图上显示照片

1 个答案: