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>