🥇 Como usar a diretiva de folheto angular

Este é um tutorial rápido sobre como adicionar mapas ao seu aplicativo angular.js. Usar a API do google maps ou leaflet.js por si só é simples. Infelizmente, manipular o DOM nem sempre é simples em projetos do angular.js. Bibliotecas externas precisam ser empacotadas nas diretivas angular.js. Felizmente, existe uma comunidade Angular legítima que fez o trabalho pesado por nós.

Vamos usar a diretiva de folheto angular .

Aqui está a essência do código finalizado no github.

Primeiro inclua todos os scripts. Precisamos da biblioteca angular, folheto, código de diretiva e nosso script:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Mapping App</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="./angular-leaflet-directive.js"></script>
    <script src='./app.js'></script>
</body>
</html>

Observe que também incluímos o leaflet.css no cabeçalho. Em seguida, precisamos injetar a diretiva como uma dependência em nosso aplicativo quando inicializamos nosso aplicativo:

var app = angular.module("mymapingapp", [
    "leaflet-directive"
]);

Agora vincule nosso módulo angular ao aplicativo. Adicione ng-app="mymapingapp"ao <html> como um profissional. Anexe também ng-controller="MainCtrl"ao corpo ou seção onde queremos o mapa. Usaremos o controlador angular.js para fornecer opções para o mapa e outros itens. Faremos isso estendendo o escopo do controlador com algumas propriedades. A diretiva angular-leaflet lerá essas propriedades fora do escopo do controlador e atualizará automaticamente. Este é o controlador com as opções:

app.controller('MainCtrl', ['$scope', function($scope) {
    // make map
    angular.extend($scope, {
        san_fran: {
            lat: 37.78,
            lng: -122.42,
            zoom: 13
        },
        events: {},
        layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'https://{s}.tiles.mapbox.com/v3/examples.map-i875mjb7/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            }
        },
        defaults: {
            scrollWheelZoom: false
        }
    });
}]);

Como você pode ver, estamos estendendo o objeto $ scope com mais propriedades. Vamos alimentá-los para a diretiva como uau:

<leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'></leaflet>

Existem muitas outras opções. Como um idiota, vou encorajá-lo a verificar a documentação .

Você também precisa dar ao elemento do mapa altura e largura. Eu o seleciono usando um id. Adicione este CSS:#map{ height: 450px width: 450px; }

Portanto, temos um mapa. Whoop dee do! É uma espécie de código, mas sabemos que é o Caminho Angular ??.

Faremos nosso mapa um pouco mais interessante. Quando clicamos no mapa, vamos adicionar um marcador. É para isso que serve a propriedade de eventos no escopo do controlador.

Ouviremos cliques no mapa. Quando um clique desce, adicionamos um novo marcador à matriz:

// add marker
$scope.markers = new Array();
$scope.$on("leafletDirectiveMap.click", function(event, args){
    var leafEvent = args.leafletEvent;
    $scope.markers.push({
        lat: leafEvent.latlng.lat,
        lng: leafEvent.latlng.lng,
        draggable: true
    });
});

Portanto, agora, sempre que você clicar no mapa, terá marcadores irritantes que podem ser arrastados. Ajuste as propriedades no escopo do controlador e vincule-as aos <leaflet>atributos da diretiva e você terá um mapa angulartástico!

Você pode espiar o código finalizado neste Github Gist

Related Posts