使用MapBox在Foursquare上标记类别和过滤器?

时间:2014-03-10 14:35:25

标签: jquery foursquare mapbox

我已将 API与集成在一起。它工作正常。现在我想添加过滤器并显示不同的基于类别的标记,例如;咖啡厅,学校,餐厅等。请帮助我实现这一目标。谢谢。 这是我的代码:

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);
    }


    });


});

}

0 个答案:

没有答案