根据当前窗口的半径限制Google Map上Instagram API的帖子 [英] Limit posts from Instagram API on a Google Map based on radius in current window
问题描述
所以我有下面的代码，它是一个node.js应用程序的前端，该应用程序使用特定的hashtag来拉动Instagram帖子。现在它在全世界发布。有没有办法限制帖子的半径，并且如果可能的话，限制到用户当前可见的窗口？我使用Instagram实时标签订阅。
函数初始化（）{
var样式= [{
featureType：landscape，
stylers：[{
color：＃808080
}，{
visibility ：simplified
}]
}，{
featureType：administrative，
elementType：labels.text.fill，
stylers：[{
weight：0.1
}，{
lightness：100
}，{
visibility：off
}]
}，{}];
var mapOptions = {
center：new google.maps.LatLng（32.71533，-117.15726），
zoom：4，
scrollwheel：false，
scaleControl：true，
styles：styles
};
var map = new google.maps.Map（document.getElementById（map-canvas），
mapOptions）;
var socket = io.connect（）;
socket.on（'photo'，function（data）{
var icon = {
url：data.img，// url
size：new google.maps.Size （80,80），// size
};
marker = new google.maps.Marker（{
position：new google.maps.LatLng（data.lat，data.long） ，
draggable：true，
动画：google.maps.Animation.DROP，
图标：图标，
映射：映射，
标题：data.caption
}）;
}）;
//尝试HTML5地理定位
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
var pos = new google.maps .LatLng（position.coords.latitude，position.coords.longitude）;
map.setCenter（pos）;
}，function（）{
handleNoGeolocation（true）;
}）;
} else {
//浏览器不支持地理定位
handleNoGeolocation（false）;
函数handleNoGeolocation（errorFlag）{
if（errorFlag）{
var content ='错误：地理定位服务失败。';
} else {
var content ='错误：您的浏览器不支持地理位置。
}
var options = {
map：map，
position：new google.maps.LatLng（60，105），
content：content
};
var infowindow = new google.maps.InfoWindow（options）;
map.setCenter（options.position）;
}
//最后，调用map
google.maps.event.addDomListener（window，'load'，initialize）;
据我所知，没有将端点（即地理位置和标签）合并到一个搜索中的方法。我认为你有2个选项，并且这两个选项在你的结尾都会相当劳动密集，这取决于hashtag / s的流行程度和地理半径。我有兴趣看到更多意见。
选项1
- 保持您的实时标签订阅
b 手动处理结果以根据每张照片提供的位置信息进行过滤
来自doc的示例：
...
location：{
latitude ：37.780885099999999，`
id：514276，
longitude：-122.3948632，
name：Instagram
}
...
优点： 来自doc的示例： 优点： 缺点： 已更新答案： >我认为你对位置和地理位置感到困惑，你在最后的评论（大声思考）中描述的正是正是我想在选项2中提出的建议。位置是您可以标记的地方上传时的照片，例如星巴克市中心，并且不是非常有用的国际海事组织，而地理区域使用纬度，经度&一个半径，对于你想要达到的目标来说是完美的 - 无论用户身在何处，都可以找到并显示相近的照片。 查看地理订阅部分 http://instagram.com/developer/realtime/ 创建地理订阅与标签订阅非常相似，因此不应该花费太多的时间来修补已有的内容。正如你猜测的那样，你只需要使用一个javascript库来首先抓取用户纬度/经度 So I have the code below which is the front end on a node.js app which pulls Instagram posts with a certain hashtag. Right now it posts all over the world. Is there a way to limit the radius on the posts and if possible, limit to the window that is currently visible to the user? I'm using the Instagram Real Time tag subscription.
As far as I'm aware, there is no way to combine endpoints, ie Geographies and Tags into one search. I would think you have 2 options and both will be fairly labour intensive on your end, depending on the popularity of the hashtag/s, and the radius of your geography. I'm interested to see more opinions on this. Example from doc: Pros: Cons: Example from doc: Pros: Cons: UPDATED ANSWER: I think you're confused between Locations and Geographies, what you describe in your last comment (thinking out loud) is exactly what I was trying to suggest in option 2. Locations are places where you can tag a photo when uploading, for instance 'Starbucks Downtown', and are not terribly useful IMO, whereas Geographies use latitude, longitude & a radius, and are perfect for what you want to achieve - finding and displaying photos taken in close proximity, no matter where the user is. Check out the "Geography Subscriptions" section of http://instagram.com/developer/realtime/ Creating a Geography Subscription is very similar to a Tag subscription so it shouldn't take much to tinker with what you've already got. As you guessed, you will just need to use a javascript library to grab the users lat/longitude first 这篇关于根据当前窗口的半径限制Google Map上Instagram API的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
缺点：
ul>
选项2
...
tags：[expobar]，
...
function initialize() {
var styles = [{
"featureType": "landscape",
"stylers": [{
"color": "#808080"
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"weight": 0.1
}, {
"lightness": 100
}, {
"visibility": "off"
}]
}, {}];
var mapOptions = {
center: new google.maps.LatLng(32.71533, -117.15726),
zoom: 4,
scrollwheel: false,
scaleControl: true,
styles: styles
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var socket = io.connect();
socket.on('photo', function (data) {
var icon = {
url: data.img, // url
size: new google.maps.Size(80, 80), // size
};
marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
draggable: true,
animation: google.maps.Animation.DROP,
icon: icon,
map: map,
title: data.caption
});
});
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
}, function () {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
// Finally, call map
google.maps.event.addDomListener(window, 'load', initialize);
Option 1
...
"location": {
"latitude": 37.780885099999999,`
"id": "514276",
"longitude": -122.3948632,
"name": "Instagram"
}
...
Option 2
...
"tags": ["expobar"],
...
