angularJs 实现手机端签到功能（高德api）

来源：互联网发布：磁力积木淘宝编辑：程序博客网时间：2024/06/05 22:29

近期的项目需要借用高德地图API完成位置签到功能，借助高德地图javascript API和angularjs完成了一个简单的高德地图签到功能

index.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><base href="/MapSign/" /><!-- 本地 --><!--<base href="/" />--><!-- 服务器 --><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 禁浏览器缓存 --><META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQUIV="expires" CONTENT="0"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="shortcut icon" href="img/bitbug_favicon (1).png" type="image/png"><title ng-bind="$state.current.data.pageTitle"></title><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><!--    描述：angularjs及相关js文件的加载    ----start------   --><script type="text/javascript" src="js/angular.min-1.4.6.js"></script><script type="text/javascript" src="js/angular-ui-router.js"></script><script src="js/jquery-labelauty.js"></script><script type="text/javascript" src="custom-js/csApp.js"></script><script type="text/javascript" src="custom-js/csRouteApp.js"></script><script type="text/javascript" src="custom-js/loginController.js" ></script><script type="text/javascript" src="custom-js/loginService.js" ></script><script type="text/javascript" src="custom-js/commonService.js" ></script><script type="text/javascript" src="custom-js/filter.js" ></script><script type="text/javascript" src="custom-js/pageWidget.js" ></script><script type="text/javascript" src="custom-js/menuController.js" ></script><script type="text/javascript" src="custom-js/signController.js" ></script><script type="text/javascript" src="custom-js/footerSelectController.js" ></script><!--门户部分--><script src="js/jquery-ui-1.9.2.custom.min.js"></script><script src="js/jquery-migrate-1.2.1.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/modernizr.min.js"></script><script src="js/jquery.nicescroll.js"></script><script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script><script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script><script src="js/dynamic_table_init.js"></script><script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script><script type="text/javascript" src="js/swiper-3.3.1.min.js"></script><!--<script type="text/javascript" src="js/jquery.js"></script>--><!-- 地图显示JS--><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=697229d8834680c256acd24f626297b6"></script><script src="http://webapi.amap.com/ui/1.0/main.js"></script> <link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/feedback-page.css" /><link rel="stylesheet" href="css/feedback.css" /><link rel="stylesheet" href="css/mui.css" /><link rel="stylesheet" href="css/mui.min.css" /><link rel="stylesheet" href="css/mui.picker.min.css" /><link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/zyUpload.css" type="text/css"><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/myfootprint.css" /><link rel="stylesheet" href="css/teamfootprint.css" /><link rel="stylesheet" href="css/sign-detail.css" /><link rel="stylesheet" href="css/signin-details.css" /><link rel="stylesheet" type="text/css" href="css/signin.css"/><script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';</script></head><body style="{{cssUrl}}"><div ui-view></div></body></html>

csRouteApp.js

var csRouteApp = angular.module("CsRouteApp", ['ui.router']);csRouteApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {if (!$httpProvider.defaults.headers.get) {    $httpProvider.defaults.headers.get = {};  }  $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';  //禁用IE对ajax的缓存  $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';  $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';  $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';$urlRouterProvider.otherwise('/login');$stateProvider.state('home', {url: '/home',views: {'': {templateUrl: 'html/home.html'},'main@home': {templateUrl: 'html/main.html'},'foot@home': {templateUrl: 'html/foot.html'},},data: {pageTitle: '首页',}}).state('login', {url: '/login',templateUrl: 'html/login.html',data: {pageTitle: '登录'}})/****签到****/.state('home.mapSignMain', {url: '/mapSignMain',views: {'': {templateUrl: 'html/home.html'},'main@home': {templateUrl: 'html/mapSign.html'},'foot@home': {templateUrl: 'html/foot.html'},},data: {pageTitle: '签到'}}).state('home.mapSignAdd', {url: '/mapSignAdd/:lng/:lat/:locationUrl',views: {'': {templateUrl: 'html/home.html'},'main@home': {templateUrl: 'html/mapSignAdd.html'},'foot@home': {templateUrl: 'html/foot.html'},},data: {pageTitle: '签到'}})/****签到****/$locationProvider.html5Mode(false);});

signontroller.js

var app1 = angular.module("SignController",["CommonService"]);app1.controller("mapSignMainCtr", function($scope, $state, $stateParams, $compile, $rootScope, $http,commonService,sessionService) {/**     * 初始化地址     */    $scope.address;    /**     * 初始化经度 纬度     */    $scope.longitude;    $scope.latitude;        $scope.map;//存放初始化的地图对象    $scope.geolocation;    $scope.geocoder;//    var position=new AMap.LngLat(121.119255,31.2911);    $scope.map = new AMap.Map("container",{          resizeEnable: true,          zoom: 14,          zoomEnable:false,  dragEnable: false      });    var marker = new AMap.Marker({        map:$scope.map,        bubble:true    })var geocoder;$scope.map.plugin(['AMap.Geolocation','AMap.Geocoder'],function(){var geolocation = new AMap.Geolocation({          enableHighAccuracy: true,//是否使用高精度定位，默认:true          timeout: 10000,          //超过10秒后停止定位，默认：无穷大          maximumAge: 0,           //定位结果缓存0毫秒，默认：0          convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true          showButton: true,        //显示定位按钮，默认：true          buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)          showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true          showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true          panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true          zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false      bubble:true  });geocoder = new AMap.Geocoder({        radius: 1000,    extensions: "all",            city: "全国"//城市，默认：“全国”        });        $scope.map.addControl(geolocation);        geolocation.getCurrentPosition();    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息        //解析定位结果    function onComplete(data) {        $scope.longitude = data.position.getLng();        $scope.latitude = data.position.getLat();        var lnglatXY = $scope.map.getCenter(); //获取地图中心点        geocoder.getAddress(lnglatXY,function(status,result){              if(status=='complete'){                 $scope.address = ""+result.regeocode.formattedAddress;                 document.getElementById('address').value = $scope.address;              }            })    }        //解析定位错误信息    function onError(data) {        document.getElementById('mapSignAdd').disabled  = true;    }    });    $scope.map.on('click',function(e){    marker.setPosition(e.lnglat);    geocoder.getAddress(e.lnglat,function(status,result){      if(status=='complete'){      $scope.address = result.regeocode.formattedAddress;      document.getElementById('address').value = $scope.address;      }    })})       /** * 前往签到页面 */$scope.toAddMapSign = function(){$state.go("home.mapSignAdd", {lng:$scope.longitude,lat:$scope.latitude,locationUrl:$scope.address});}});

mapsign.html

<div class="hsignin-content" ng-controller="mapSignMainCtr"><div id="container" class="hmapwrap"></div><div class="hsigntime"><img src="img/volunteericon.png"  class="hsignclock"/><input id="address" type="text" class="mui-input-clear mui-input sign-input" style="border-radius: 0px" ng-disabled="true"></div><div class="hroundwrap"><span class="hsignbutton" ng-click="toAddMapSign()">签到</span></div></div>

阅读全文

0 0