angular-leaflet 小例

做一個圖標和表單關聯的例子,點擊圖片可以彈出表單顯示圖片詳細信息,默認表單是關閉的,可以手動關閉表單.

首先是JS定義圖標，包括名字、經緯度、圖片等信息

    markers: [
        {
           name: 'marker A', 
           lat: 39, //圖標經度
           lng: 116, //圖標緯度
           draggable: true, //圖標可拖拽
           icon: icons.green //圖標圖片
            }
         ]   

JS圖片的定義，定義圖片路徑、大小等信息

//icons.green
    var icons = {
        green: {
            iconUrl: 'img/leaf-green.png',
            iconSize: [30, 30],
            className: 'green',
            iconAnchor:  [15, 15]
        },
     }

默認表單爲關閉狀態

  $scope.alarmForm = false;

點擊圖片打開表單

   $scope.$on('leafletDirectiveMarker.click', function(e, args) {
    console.log("Leaflet Click");
    var i = args.modelName;
    $scope.alarmForm = true; //打開表單
    //保存屬性值，$scope作用域
    $scope.modelName = $scope.markers[i].name;
    $scope.modelLat = $scope.markers[i].lat;
    $scope.modelLng = $scope.markers[i].lng;
    $scope.modelLayer = $scope.markers[i].layer;
    $scope.marker  =  $scope.markers[i];
    });

關閉表單,把此函數通過ng-click綁定到表單關閉按鈕

    $scope.cancel = function() {
    $scope.alarmForm = false;//關閉表單
    };

HTML表單

 <form role="form" ng-show="alarmForm" class="form-horizontal" >
        <div class="col-sm-12">
        <br>
          名字:<input ng-model="modelName">
          經度:<input ng-model="modelLat">
          緯度:<input ng-model="modelLng">
          層名:<input ng-model="modelLayer">
          位置:<input ng-model="cen.lat">
          位置:<input ng-model="cen.lng">
          層級:<input ng-model="cen.zoom">
          圖片:<input ng-model="iconUrl">
        </div〉
   </form>