angular-leaflet 小例

来源：互联网发布：手机淘宝页头图片编辑：程序博客网时间：2024/05/19 18:39

做一个图标和表单关联的例子,点击图片可以弹出表单显示图片详细信息,默认表单是关闭的,可以手动关闭表单.

首先是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>

0 0