• 基于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

  • 相关阅读:
    HTML 防盗链 用src引用网上图片显示 403 Forbidden
    JS C# 正则表达式去除html字符中所有的标签(img em标签除外)
    net core 3.1使用ElasticSearch 全文搜索引擎
    VS2019开启调试,测试图片上传的时候,一点到图片上传,直接导致VS调试崩掉,返回 程序“[14764] iisexpress.exe”已退出,返回值为 -1 (0xffffffff)。 是什么原因导致的?
    NET 5 使用IdentityServer4 4.x
    服务器下配置springboot项目开机自启
    分布式技术文档
    win10系统ffmpeg命令初体验
    大数据Hadoop生态圈介绍
    MySQL之Explain详解
  • 原文地址:https://www.cnblogs.com/gdouzz/p/6548338.html
Copyright © 2020-2023  润新知