The article directories

  • 1. Apply for a key value
  • 2. Introduce maps
  • 3. Function realization
  • 4. Effect display

1. Apply for a key value

Refer to this blog: blog.csdn.net/chenwen112/…

2. Introduce maps

<script type="text/javascript" src="The key values of http://webapi.amap.com/maps?v=1.4.3&key= you application"></script>
Copy the code

3. Function realization

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="Initial - scale = 1.0, the user - the scalable = no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<link rel="stylesheet" href=".. /.. /css/mui.min.css">
		<link rel="stylesheet" type="text/css" href=".. /.. /css/app.css" />
		<link rel="stylesheet" type="text/css" href=".. /.. /css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href=".. /.. /css/mui.picker.min.css">

		<title>Positioning punching</title>
		<style type="text/css">
			#iCenter {
				width: 95%;
				height: 150px;
				border: 1px # 000 solid;
				margin: 20px auto;
			}

			.a {
				color: #8F8F94;
				width: 55px;
				height: 55px;
				text-align: center;
				display: block;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 5px;
				float: left;
				margin: 10px 10px 5px 15px;
			}
		</style>
	</head>
	<body onload="startTime()">
		<div id="iCenter"></div>
		<div class="mui-card">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label><span class="mui-icon mui-icon-paperplane" style="font-size: medium;"></span>Check-in time:</label>
					<label id="attentime"></label>
				</div>
				<div class="mui-input-row">
					<label> <span class="mui-icon mui-icon-location-filled" style="font-size: medium;"></span>Check-in Location:</label>
					<label id="addr"></label>
				</div>
			</form>
		</div>

		<div class="mui-card" style="height: 20%;">
			<div class=" mui-card-media">
				<img class="a" id="img" />
				<label for="myFile">
					<span id="format" class="a mui-icon mui-icon-camera" style="font-size: -webkit-xxx-large;"></span>
				</label>
				<input style="display: none;" type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" />
			</div>
		</div>
		<div style="background: #e0e0e0;">
			<button id="succbtn" type="button" class="mui-btn mui-btn-link mui-text-center" style="width: 100%; font-size: large; background: #e0e0e0; position: fixed; bottom:0px;">submit</button>

		</div>

		<script src=".. /.. /js/mui.js"></script>
		<script src=".. /.. /js/mui.picker.min.js"></script>
		<script type="text/javascript" src="The key values of http://webapi.amap.com/maps?v=1.4.3&key= application"></script>
		<script src=".. /.. /js/host.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			/** ** locate */
			var mapObj = new AMap.Map('iCenter');
			mapObj.plugin('AMap.Geolocation'.function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true.// Whether to use high precision positioning. Default :true
					timeout: 10000.// Stop positioning after 10 seconds, default: infinity
					maximumAge: 0.// Cache location results for 0 ms. Default: 0
					convert: true.// Automatically offset coordinates, the offset coordinates are gaode coordinates, default: true
					showButton: true.// Display location button, default: true
					buttonPosition: 'LB'.// Location button docking position, default: 'LB', lower left corner
					buttonOffset: new AMap.Pixel(10.20), // The offset between the location button and the set docking position. Default: Pixel(10, 20)
					showMarker: true.// After the location is successfully located, a dot mark is displayed at the location. Default: true
					showCircle: true.// Use a circle to indicate the location accuracy range after the location is successful. Default: true
					panToLocation: true.// Set the location as the center point of the map. Default: true
					zoomToAccuracy: true // After successful positioning, adjust the map view range to make the positioning position and accuracy range visible in the view. Default: false
				});
				mapObj.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); // Returns location information
				AMap.event.addListener(geolocation, 'error', onError); // Returns a location error message
			});

			function onComplete(obj) {
				// var res = 'latitude:' + obj.position +
				// '\n accuracy range: '+ obj.accuracy +
				// 'm \n location result source:' + obj.location_type +
				// '\n status information: '+ obj.info +
				// '\n address: '+ obj.formattedAddress +
				// '\n address info: '+ json.stringify (obj.addressComponent, null, 4);
				var addr = obj.formattedAddress;

				document.getElementById("addr").innerText = addr;
				localStorage.setItem('addr', addr);
			};

			function onError(obj) {
				// alert(obj.info + '--' + obj.message);
				console.log(obj);
			};
		</script>
</html>
Copy the code

4. Effect display