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

Foursquare签到地图


各种折腾·foursquarephpscriptweb

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

这个foursquare的地图折腾好几次了,最早是手动导入google maps,然后用了foursquare的api和mapbox的地图。现在第三次折腾了。还是用的foursquare的api,但是地图由mapbox换成mapquest.com

mapbox的免费账户每月有3000次访问量的限制,而且没有ssl和卫星地图。最便宜的ssl地图要每个月149美刀 Orz
mapquest.com和mapbox同样使用的是openstreetmap的数据,但却是免费的,而且有ssl和卫星地图,虽然美国以外地区的卫星地图放大倍数极其有限,但总好过没有吧。而且mapquest.com的地图甚至不需要注册。良心啊。

添加地图和图层的工作仍然是leaflet。只是貌似leaflet更新了,0.5.1版,所以要稍微修改下。因为leaflet的cdn没有使用ssl,所以保存到自己服务器上。先去leaflet下载必要的文件,然后解压,/dist目录下就是所需要的文件了。建立一个map.php文件,加载刚才下载的css和js文件,然后就可以建立地图了。

<div id="map" style="width: 1000px; height: 600px"></div> //Set up div with id of "map" and define width and height
<script type="text/javascript">
var mapquestosmUrl = 'https://{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
    mapquestsatUrl = 'https://{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png',
    subDomains = ['otile1','otile2','otile3','otile4'],
    mapquestAttrib = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | &copy; Tiles Courtesy of  <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img style="vertical-align:middle;" src="https://developer.mapquest.com/content/osm/mq_logo.png"> | &copy; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'; //Required copyright disclaim
var osm = L.tileLayer(mapquestosmUrl, {attribution: mapquestAttrib, subdomains: subDomains, maxZoom: 18}), //Openstreetmap
    sat = L.tileLayer(mapquestsatUrl, {attribution: mapquestAttrib, subdomains: subDomains, maxZoom: 11}); //Satellite map. Maximum zoom level outside of the US is 11
var map = L.map('map', {
    center: new L.LatLng(27.502, 155.264), //Initial position when page loaded
    zoom: 2, //Initial zoom level when page loading
    layers: [osm, sat]
});
var baseMaps = {
    "Map": osm,
    "Satellite View": sat
};
L.control.layers(baseMaps).addTo(map);
</script>
<?php
$access_token='XXXXXXXXXX'; //Access token obtained from foursquare
$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 geojsonFeature = ".json_encode(array(
                "type" => "FeatureCollection",
                "features" => $features
           )).";";
echo '<script type="text/javascript">'.$data.'</script>';
?>
<script type="text/javascript">
var geojsonLayer = L.geoJson().addTo(map);
geojsonLayer.addData(geojsonFeature);
function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}
L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(map);
</script>

填好foursquare的access token就行。我的地图: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 许可证发布 © 2013
转载注明引用来源 https://blog.xjpvictor.info/2013/05/foursquare-map/

赞助我

评论

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

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

取消 上传图片 或拖拽上传

* 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

更多相似文章