Недавно я создал приложение, используя Angular JS и листовка. Очень похоже на то, что вы описали, включая данные о местоположении из файла JSON. Мое решение похоже на blesh.
Вот основной процесс.
У меня есть элемент <map>
на одной из моих страниц. Затем у меня есть директива заменить элемент <map>
картой Leaflet. Мои настройки немного отличаются, потому что я загружаю данные JSON в Factory, но я адаптировал их для вашего варианта использования (извините, если есть ошибки). В Директиве загрузите файл JSON, затем выполните цикл по каждому из ваших местоположений (вам потребуется настроить файл JSON совместимым образом). Затем отобразите маркер на каждой широте/долготе.
HTML
<map id="map" style="width:100%; height:100%; position:absolute;"></map>
Директива
app.directive('map', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function(scope, element, attrs) {
var popup = L.popup();
var southWest = new L.LatLng(40.60092,-74.173508);
var northEast = new L.LatLng(40.874843,-73.825035);
var bounds = new L.LatLngBounds(southWest, northEast);
L.Icon.Default.imagePath = './img';
var map = L.map('map', {
center: new L.LatLng(40.73547,-73.987856),
zoom: 12,
maxBounds: bounds,
maxZoom: 18,
minZoom: 12
});
// create the tile layer with correct attribution
var tilesURL='http://tile.stamen.com/terrain/{z}/{x}/{y}.png';
var tilesAttrib='Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';
var tiles = new L.TileLayer(tilesURL, {
attribution: tilesAttrib,
opacity: 0.7,
detectRetina: true,
unloadInvisibleTiles: true,
updateWhenIdle: true,
reuseTiles: true
});
tiles.addTo(map);
// Read in the Location/Events file
$http.get('locations.json').success(function(data) {
// Loop through the 'locations' and place markers on the map
angular.forEach(data.locations, function(location, key){
var marker = L.marker([location.latitude, location.longitude]).addTo(map);
});
});
}
};
Пример файла JSON
{"locations": [
{
"latitude":40.740234,
"longitude":-73.995715
},
{
"latitude":40.74277,
"longitude":-73.986654
},
{
"latitude":40.724592,
"longitude":-73.999679
}
]}
person
Brett DeWoody
schedule
14.03.2013