这个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 = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | © 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"> | © 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
参数