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

最新推荐文章于 2018-11-26 18:33:18 发布

jackmassion

最新推荐文章于 2018-11-26 18:33:18 发布

阅读量1.7k

点赞数

文章标签： angularjs 高德地图

本文链接：https://blog.csdn.net/jackmassion/article/details/78863633

版权

近期的项目需要借用高德地图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>