我已将foursquare API与mapbox集成在一起。它工作正常。现在我想添加过滤器并显示不同的基于类别的标记,例如;咖啡厅,学校,餐厅等。请帮助我实现这一目标。谢谢。 这是我的代码:
cityfqcn = cityName;
var geodata = jQuery.getJSON(
"http://gd.geobytes.com/GetCityDetails?callback=?&fqcn="+cityfqcn,
function (data) {
$( "#map" ).remove();
$("<div></div>").attr('id','map').appendTo('body');
var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
attributionControl: true
})
.setView([data.geobyteslatitude,data.geobyteslongitude], 14);
map.featureLayer.on('ready', function() {
//var typesObj = {}, types = [];
var features = map.featureLayer.getGeoJSON().features;
alert('asdf'+features.length);
});
// Setting up IDs
var FSMAPID = 'GG4IPX4DNSXOIWWQ3FMBTO2LVBFHEUMOE3R5VUVQ4VRUP2PD';
var FSMAPSID = '4EQ3REO4XUIPJM22WC3UZVBAYOWSLB2UZCNCZLK4UKSMSHKY';
// Foursquare API Endpoint call
var API_ENDPOINT = 'https://api.foursquare.com/v2/venues/search' +
'?client_id=MPID' +
'&client_secret=MPSECRET' +
'&v=20130815' +
'&ll=LATLON' +
'&query=' +
'&callback=?';
// Group all the Foursquare places on map
var foursquarePlaces = L.layerGroup().addTo(map);
// Constants replacepment and append with FS API Endpoint
$.getJSON(API_ENDPOINT
.replace('MPID', FSMAPID)
.replace('MPSECRET', FSMAPSID)
.replace('LATLON', map.getCenter().lat +
',' + map.getCenter().lng), function(result, status) {
if (status !== 'success')
return alert('Request to Foursquare failed');
// Transforming each venue into a marker on the map.
for (var i = 0; i < result.response.venues.length; i++) {
var ven = result.response.venues[i];
var myIcon = L.icon({
iconUrl: 'maki/renders/'+ven.categories.shortName+'-18.png',
iconRetinaUrl: 'maki/renders/'+ven.categories.shortName+'-18@2x.png',
//shadowUrl: 'maki/renders/marker-24@2x.png',
//shadowRetinaUrl: 'maki/renders/marker-24@2x.png',
});
alert("features:"+ven.categories.shortName);
var latlng = L.latLng(ven.location.lat, ven.location.lng);
var marker = L.marker(latlng, {icon: myIcon} ).bindPopup('<table><tr><td bgcolor="#cccccc" colspan=2><b>'+ven.name + '</b></td></tr><tr><td class="tooltip"><b>Address:</b></td><td class="tooltip">'+ ven.location.address + '</td></tr> <tr><td class="tooltip"><b>Distance:</b></td><td class="tooltip">'+ ven.location.distance + '</td></tr><tr><td class="tooltip"><b>CheckIn(s):</b></td><td class="tooltip">'+ ven.stats.checkinsCount + '</td></tr></table>').addTo(foursquarePlaces);
//L.marker([41.894140, 12.50], {icon: myIcon}).addTo(map);
}
});
});
}