Using AutoNavi map api for positioning

1. Precise positioning requires https and manual consent of the user.

 When you first enter the location, the location is successful, and the city where the location is located is saved. Re-enter without positioning and use the last positioning.

1. First introduce the Gaode map api

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=你自己的key"></script>

2. Add a div to the page

<div id="container" style="display: none;"></div>

3. Positioning

			var map = new AMap.Map('container', {
				resizeEnable: true
			});
			//position
			if(localStorage.getItem("xcity") == null || localStorage.getItem("xcity") == "") {//If the city is stored, use the last stored city
				var xcity = localStorage.getItem("xcity")
			} else { //otherwise reposition
				map.plugin('AMap.Geolocation', function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //Whether to use high precision positioning, default: true
						timeout: 10000, //Stop positioning after more than 10 seconds, default: infinity
						noIpLocate: 0,
						maximumAge: 0, //The positioning result is cached for 0 milliseconds, default: 0
						convert: true, //automatically offset the coordinates, the coordinates after the offset are Gaode coordinates, default: true
						showButton: false, //Show positioning button, default: true
						buttonPosition: 'LB', //Location button docking position, default: 'LB', lower left corner
						buttonOffset: new AMap.Pixel(10, 20), //The offset between the positioning button and the set docking position, default: Pixel(10, 20)
						showMarker: false, //Display the point marker at the positioned position after the positioning is successful, default: true
						showCircle: false, //After the positioning is successful, a circle is used to indicate the positioning accuracy range, default: true
						panToLocation: false, //After the positioning is successful, the positioned position will be used as the center point of the map, default: true
						zoomToAccuracy: false //Adjust the map field of view after the positioning is successful so that the positioning position and accuracy range are visible within the field of view, default: false
					});
					map.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', onComplete); //Return location information
					AMap.event.addListener(geolocation, 'error', onError); //Return location error information
				});

				function onComplete(data) {
					var xcity = data.addressComponent.city //Located city name
					// latitude and longitude
					var lng = data.position.getLng()
					var lat = data.position.getLat ()

					localStorage.setItem("xcity", xcity) //Store the positioning in localStorage, and it will not be repositioned next time you enter

				}
				// Parse the positioning error message
				function onError(data) {
					// alert("Location failed")
					var xcity = "Qingdao City" //You can add a default city here, and use this default city after the positioning error (or return the positioning error)
				}
			}

//Write here the ajax after getting the positioning
//For example, get the attractions area closest to me

4. Change localStorage after manual city selection

2. Only get the positioning of the city. Disadvantages: Inaccurate, there is a chance of errors. Advantages: no pop-up window, http can also be used

1.2.4. Same as above

3. Positioning

			if(localStorage.getItem("xcity") == null || localStorage.getItem("xcity") == "") { //If the city is stored, use the last stored city
				var xcity = localStorage.getItem("xcity")
			} else { //otherwise reposition
				map.getCity(function(data) {
					if(data['province'] && typeof data['province'] === 'string') {
						var xcity = data['city'] || data['province']
						localStorage.setItem("xcity", xcity) //Store the positioning in localStorage, and it will not be repositioned next time you enter
					}
				});
			}
			//Write the ajax after getting the positioning