Foursquare没有提供可以公开展示的签到历史地图,只能在登录后的history中查看签到历史的地图。虽然有个4sqmap.com,但我嫌它太复杂。所以用api自己弄了个,主要参考了 http://mapbox.com/publishing/leaflet/
地图采用的是leaflet和mapbox,mapbox负责提供地图,leaflet负责在地图上标记出签到的地点。mapbox.com免费用户有每个月3000次浏览量。
先下载这些文件 foursquare map 解压后全部放在网站目录下。然后新建一个map.php
<?php
$access_token='xxxxxxxxxxx'; //Foursquare Access Token
$url = 'https://api.foursquare.com/v2/users/self/checkins?v=20140101&oauth_token='.$access_token;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"$url");
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
$data=curl_exec($ch);
curl_close($ch);
$data=json_decode($data,true);
$data=$data['response']['checkins']['items'];
$features=array();
foreach($data as $checkin){
if (array_key_exists('location',$checkin)) {
$name=$checkin['location']['name'];
$lat=$checkin['location']['lat'];
$lng=$checkin['location']['lng'];
$coordinates=array($lng,$lat);
$geometry=array(
"type" => "Point",
"coordinates" => $coordinates
);
$properties=array(
"name" => $name
);
$item=array(
"type" => "Feature",
"geometry" => $geometry,
"properties" => $properties
);
array_push($features, $item);
}
if (array_key_exists('venue',$checkin)) {
$name=$checkin['venue']['name'];
$lat=$checkin['venue']['location']['lat'];
$lng=$checkin['venue']['location']['lng'];
$coordinates=array($lng,$lat);
$geometry=array(
"type" => "Point",
"coordinates" => $coordinates
);
$properties=array(
"name" => $name
);
$item=array(
"type" => "Feature",
"geometry" => $geometry,
"properties" => $properties
);
array_push($features, $item);
}
}
$data="var data = ".json_encode(array(
"type" => "FeatureCollection",
"features" => $features
)).";";
echo $data;
?>
再建立一个map.html
<html>
<head>
<title>Foursquare Map</title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<script src="leaf.min.js"></script>
</head>
<body>
<div id="mapbox" style="width: 1000px; height: 600px"></div> //Size of map
<script type="text/javascript">
var url = 'http://a.tiles.mapbox.com/v3/username.map-address.jsonp'; //Map TileJSON url from mapbox.com
var map = new L.Map('mapbox')
.setView(new L.LatLng(27.502, 155.264), 2); //Initial position and zoom level
wax.tilejson(url, function(tilejson) {
map.addLayer(new wax.leaf.connector(tilejson));
});
</script>
<script src="map.php"></script>
<script type="text/javascript">
var geojsonLayer = new L.GeoJSON();
geojsonLayer.on('featureparse', function (e) {
if (e.properties && e.properties.name){
e.layer.bindPopup(e.properties.name);
}
});
geojsonLayer.addGeoJSON(data);
map.addLayer(geojsonLayer);
</script>
</body>
</html>
然后就很简单了,先去Foursquare注册一个app,根据这个app的Client id和Callback url访问
https://foursquare.com/oauth2/authenticate?client_id=CLIENT_ID&response_type=token&redirect_uri=YOUR_REGISTERED_REDIRECT_URI
把返回的地址中的access_token放到map.php中Foursquare Access Token那边。这样Foursquare就算设置好了。
接下来去mapbox.com,注册帐户,新建一个地图。打开这个地图,在右侧,有个embed,点开后出现一个提示框,用右边的TileJSON url替换掉map.html中的Map TileJSON url。
访问map.html就会出现一个有Foursquare签到标记的地图了。也可以设置地图中心的初始位置和地图的初始放大倍数,还有地图的大小。
效果:https://xjpvictor.info/map/
Update: 2014-02-09
根据https://developer.foursquare.com/overview/versioning添加v
参数
我照着做了,能显示check in的点,但是背景地图显示不出来...
已经自行解决了。
感谢分享!