基于angularJs坐标转换指令(经纬度中的度分秒转化为小数形式 )

    最近项目中，需要用户输入经纬度信息，因为数据库设计的时候，不可能分三个字段来存储这种信息，只能用double类型来进行存储。

    计算公式  double r=度+分/60+秒/3600 

    

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../bower_components/angular/angular.js"></script>
    <link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <title>经纬度转换控件</title>
    <style>
        .coordSpan {
            position: relative; 
            display: inline-block;
            height: 34px;
            padding-right: 2px;
        }
        .coordInput{
            height: 34px; 
            width: 40px; font-size: 14px;
            border-radius: 4px;
            border: 1px solid #ccc; 
            text-align: center;
        }
        .coordSign {
            display: inline-block; 
            width: 3px; height: 4px; 
            position: absolute; top: 0;
            right: -1px;
        }
    </style>

    <script>
            var app = angular.module("app", [], function () {
                console.log("test");
            });
            app.controller("test", ["$scope", function ($scope) {
                $scope.longitude = 113.211;
                console.log($scope.longitude);
                $scope.$watch("longitude",function(newValue,oldValue) {
                    console.log(newValue);
                });
            }]);
            app.directive("coordTransform", function () {
                return {
                    restrict: 'E',
                    scope: {
                        ngModel:"="
                    },
                    templateUrl: function () {
                        return "LongitudeAndLatitudeTemplate.html";
                    },
                    link: function (scope, elements, attrs) {
                         if (angular.isUndefined(scope.ngModel)) {
                             return "";
                         }
                         scope.obj = {
                            du: null,
                            fen: null,
                            miao: null
                        };
                        var model = scope.ngModel.toString();
                        var str = model.split(".");
                         //度
                        var du = str[0];
                         //分
                        var tp = "0." + str[1];
                        var res = String(tp * 60);
                        var str1 = res.split(".");
                        var fen = str1[0];
                        //秒
                        var tp1 = "0." + str1[1];
                        var miao = tp1 * 60;

                        scope.obj = {
                            du: du,
                            fen: fen,
                            miao:miao
                        };
                        scope.$watch("obj", function (newValue, oldValue) {
                            if (angular.isUndefined(oldValue) || angular.isUndefined(newValue)||oldValue===newValue) {
                                return;
                            }
                            var f = parseFloat(scope.obj.fen) + parseFloat(scope.obj.miao / 60);
                            scope.ngModel = parseFloat(scope.obj.du) + parseFloat(f / 60);
                           // scope.$apply(scope.ngModel);
                        },true);
                    }
                }
            });
    </script>
</head>


<body ng-app="app" ng-controller="test">
    <h1>这里是经纬度转换实例</h1>
   <coord-transform ng-Model="longitude"></coord-transform>

</body>
</html>

下面是模板的html文件

<div>
    <span class="coordSpan">
        <input type="text" ng-model="obj.du" class="coordInput" />
        <span class="coordSign">°</span>
    </span>
    <span class="coordSpan">
        <input type="text"  ng-model="obj.fen" class="coordInput"/>
        <span class="coordSign">'</span>
    </span> 
    <span class="coordSpan">
        <input type="text" ng-model="obj.miao" class="coordInput" />
        <span class="coordSign"> "</span>
    </span>
</div>

　项目地址：https://github.com/gdoujkzz/coord-transform.git

posted @ 2017-03-14 14:30  GDOUJKZZ  阅读(465)  评论(0)  编辑  收藏  举报