xjpvictor's Blog
小老鼠,上灯台,两只耳朵竖起来

Foursquare历史地图


各种折腾·foursquarephpscriptweb

本文发表于超过180天以前,部分内容可能已经失效

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参数

本文 "Foursquare历史地图" 由 K. Huang 首先发表于 xjpvictor's Blog 并以 CC BY-NC 4.0 许可证发布 © 2012
转载注明引用来源 https://blog.xjpvictor.info/2012/07/foursquare-history-map/

赞助我

2条评论

  1. 我照着做了,能显示check in的点,但是背景地图显示不出来...

    回复
  2. 已经自行解决了。

    感谢分享!

    回复

评论

你的邮箱地址不会被公开。必填项以 * 标出

无意义或不相关评论将被删除

取消 上传图片 或拖拽上传

* Some files will not be uploaded. Only png, gif, jpg are allowed and maximum 10 images, each file less than 10M.

你可以添加 10 个 png/gif/jpg 图片 (每个文件小于 10M)

允许使用以下html标签:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

你可以上传文件,粘贴代码或长文至 Drop.it.r

更多相似文章