Vueh5 was introduced simultaneously to AMap

` `

<template>
	<scroll-view class="basicInfo" scroll-y="true">

		<view class="viewMap" id="container">
			<cover-view class="back" @click="back">
				<image src=".. /.. /static/image/back-map.png" class="pic"></image>
			</cover-view>

		</view>

	</scroll-view>
</template>


<script>
	import RemoGeoLocation from '.. /.. /utils/remoGeoLocation.js'
	import {
		similarNumInfo
	} from '.. /.. /api/approve'
	var map, marker, getLng, getLat, text, address;
	var addressObj = {
		address: ' '
	}
	var approveData = {
		opinionId: ' '.approverNo: ' '.applierNo: ' '
	}
	var title = ' ';
	var content = []
	window.mapInit = function() {

		// Initialize the map
		map = new AMap.Map('container', {
			zoom: 10.resizeEnable: true
		});

		map.on('complete'.() = > { // Map lifecycle point

			// Add a toolbar
			AMap.plugin([
				'AMap.ToolBar',].function() {
				// Add a toolbar control on the drawing surface. The toolbar control integrates the combination of function buttons such as zooming, panning and positioning
				map.addControl(new AMap.ToolBar({
					// Easy zoom mode, default is false
					liteStyle: true
				}));
			});


			// Locate the current position style

			var options = {
				showButton: true.// Whether to display the location button
				buttonPosition: 'LB'.// Locate the position of the button
				/* LT LB RT RB */
				buttonOffset: new AMap.Pixel(10.20), // The distance between the positioning button and the corresponding corner
				showMarker: true.// Whether to display registration points
				markerOptions: { // Custom anchor point style, same as Options of Marker
					offset: new AMap.Pixel(-18, -36),
					content: ''
				},
				showCircle: true.// Whether to display the positioning precision circle
				circleOptions: { // Position precision circle style
					strokeColor: '#0093FF'.noSelect: true.strokeOpacity: 0.5.strokeWeight: 1.fillColor: '#02B0FF'.fillOpacity: 0.25
				},
				enableHighAccuracy: true.// Whether to use high precision positioning. Default :true
				timeout: 1000.// 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
			}

			// Specify the exact location
			AMap.plugin(["AMap.Geolocation"].function() {
				// try{
				// if (AMap.UA.ios) {
				// // to use remote location, see remogeo-js
				// var remoGeo = new RemoGeoLocation();
				// // Replacement method
				// navigator.geolocation.getCurrentPosition = function() {
				// return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
				/ /};
				// // Replacement method
				// navigator.geolocation.watchPosition = function() {
				// return remoGeo.watchPosition.apply(remoGeo, arguments);
				/ /};
				/ /}
				// }catch(e){
				// console.log(e,"ios======error");
				// }

				var geolocation = new AMap.Geolocation(options);
				map.addControl(geolocation);
				geolocation.getCurrentPosition()


				AMap.event.addListener(geolocation, 'complete'.(result) = > {
					onComplete(result)

				});
				AMap.event.addListener(geolocation, 'error'.function(result) {

					onError(result);

				});

			});




			// geolocation.getCurrentPosition(function(status, result) {
			// if (status == 'complete') {
			// onComplete(result)

			// } else {
			// console.log(result, "GPS location error result====")

			// // replace navigator's API with remote location
			// var remoGeo = new RemoGeoLocation();
			// navigator.geolocation.getCurrentPosition = function() {
			// return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
			/ /};
			// navigator.geolocation.watchPosition = function() {
			// return remoGeo.watchPosition.apply(remoGeo, arguments);
			/ /};

			// // Reinitialize the location
			// map.removeControl(geolocation);
			// geolocation = new AMap.Geolocation(options);
			// map.addControl(geolocation);
			// geolocation.getCurrentPosition(function(status, result) {
			// if (status == 'complete') {
			// onComplete(result)

			// } else {
			// console.log(result, "IP location error result====")

			// onError(result);
			/ /}
			/ /});
			/ /}
			/ /});


			// Parse the location result
			function onComplete(data) {
				if (data) {

					if(addressObj.address ! = =undefined) {
						getLng = addressObj.getLng
						getLat = addressObj.getLat
						address = addressObj.address
					} else {
						getLng = data.position.lng
						getLat = data.position.lat
						address = data.formattedAddress
						addressObj.getLng = data.position.lng
						addressObj.getLat = data.position.lat
						addressObj.address = data.formattedAddress
					}
					console.log(addressObj.address, 'addressObj.address', getLng, addressObj.address)
					var circle = new AMap.Circle({
						center: new AMap.LngLat(data.position.lng, data.position.lat), // The center of the circle
						radius: 1000./ / radius
						// Set whether drag can be used
						// draggable: true,
						strokeColor: "Rgba (57, 123, 230, 0.2)"./ / thread color
						strokeOpacity: 1.// Line transparency
						strokeWeight: 3.// Line thickness
						fillColor: "Rgba (57, 123, 230, 0.2)".// Fill the color
						fillOpacity: 0.35.// Fill transparency

					});

					// Location marker
					marker = new AMap.Marker({
						position: [getLng ? getLng : data.position.lng, getLat ? getLat : data.position
							.lat
						],
						icon: require(".. /.. /static/image/map.png"),
						offset: new AMap.Pixel(10, -20),
						// Set whether drag can be used
						draggable: true.cursor: 'move'.// Set the drag effect
						raiseOnDrag: true
					});


					map.add(marker)
					map.add(circle);
					map.setFitView();
					content = []
					content.push(address ? address : data.formattedAddress)

					infoWindow.setContent(createInfoWindow(title, content.join("<br/>")))
					infoWindow.open(map, marker.getPosition());

					marker.on('dragend', markerDrag);
					marker.on('click', markerClick);
					marker.setMap(map);

					// Drag an information popup
					AMap.event.addListener(marker, 'dragend'.function() {
						infoWindow.open(map, marker.getPosition());
					});

					// Click to display information dialog box
					AMap.event.addListener(marker, 'click'.function() {
						console.log("Click")
						content = [];
						content.push(address)
						infoWindow.setContent(createInfoWindow(title, content.join("<br/>")))
						infoWindow.open(map, marker.getPosition());

					});
				}

				// uni.hideLoading()


			}
			// Resolve locate error message
			function onError(data) {

				uni.showModal({
					title: 'tip'.content: 'Location failed'.showCancel: false.buttonText: 'Got it.'.confirmColor: '#00A57C'.// Color of the font
					success: function(res) {
						if (res.confirm) {
							// uni
							console.log('User hits OK');
						} else if (res.cancel) {
							console.log('User hit Cancel');
						}

						if (navigator.geolocation) {
							navigator.geolocation.getCurrentPosition(e= > {
								console.log(e, "navigator==e")
								uni.showToast({
									title: "Please try again later".icon: 'none'})},error= > {
								if (error.code === 1) {
									uni.showToast({
										title: "Please check that it is open and located.".icon: 'none'})}else if (error.code === 2) {
									uni.showToast({
										title: "Please turn on your cell phone to locate.".icon: 'none'})}console.log(error, "navigator==error")}); }else {
							uni.showToast({
								title: "Please check that it is open and located.".icon: 'none'}}}})); }// Latitude and longitude geographical position conversion

			function getPositionByLonLats(lng, lat) {

				var lnglatXY = [lng, lat]; // Coordinates of punctuation marks on the map
				AMap.service('AMap.Geocoder'.function() { // The callback function
					let geocoder = new AMap.Geocoder({});
					geocoder.getAddress(lnglatXY, function(status, result) {
						if (status === 'complete' && result.info === 'OK') {

							address = result.regeocode.formattedAddress;
							content = [];
							content.push(address)
							addressObj.address = address
							infoWindow.setContent(createInfoWindow(title, content.join(
								"<br/>")))}else{}}); }); }// Drag to get latitude and longitude
			const markerDrag = (e) = > {
				text = `${e.lnglat.getLng()}.${e.lnglat.getLat()} `
				getPositionByLonLats(e.lnglat.getLng(), e.lnglat.getLat())
				addressObj.getLng = e.lnglat.getLng()
				addressObj.getLat = e.lnglat.getLat()
			}
			// Click to get latitude and longitude
			const markerClick = (e) = > {
				console.log(e, 'e')
				text = `${e.lnglat.getLng()}.${e.lnglat.getLat()} `
				getPositionByLonLats(e.lnglat.getLng(), e.lnglat.getLat())
				//getLng() represents the longitude value
				//getLat() represents latitude
				addressObj.getLng = e.lnglat.getLng()
				addressObj.getLat = e.lnglat.getLat()

			}


			// Initializes the information box

			var infoWindow = new AMap.InfoWindow({
				isCustom: true.// Use custom forms
				content: createInfoWindow(title, content.join("<br/>")),
				offset: new AMap.Pixel(16, -25)});// Build a custom information form
			function createInfoWindow(title, content) {

				var info = document.createElement("div");
				// Define the middle content
				var middle = document.createElement("div");
				middle.className = "info-middle";
				let containerS = document.createElement("div");
				let confirm = document.createElement("div");
				let line = document.createElement("div");
				containerS.className = "info-middle-containerS";
				confirm.className = "info-middle-confirm";
				containerS.innerHTML = content;
				confirm.innerHTML = 'sure'
				line.innerHTML = "|";
				confirm.onclick = closeInfoWindow;
				middle.appendChild(containerS);
				middle.appendChild(line);
				middle.appendChild(confirm);
				info.appendChild(middle);
				return info;
			};



			// Close the info window

			function closeInfoWindow() {
				let obj = {
					longitude: addressObj.getLng, / / longitude
					latitude: addressObj.getLat / / latitude

				}
				map.remove(marker)

				similarNumInfo(obj).then((res) = > {
					if (res.code == '000000' && res.data && res.data.length > 0) {
						uni.showModal({
							title: 'tip'.content: 'Application has been recorded within 100m of current location in the last 30 days'.// showCancel: false,
							confirmText: 'Got it.'.confirmColor: '#00A57C'.// Color of the font
							success: function(res) {
								if (res.confirm) {

									if (approveData.opinionId) {
										uni.$emit('detailMap', {
											addressObj: encodeURIComponent(JSON
												.stringify(
													addressObj)),
											opinionId: approveData.opinionId,
											approverNo: approveData.approverNo,
											applierNo: approveData.approveData,
											flowId: approveData.flowId,
											returnStatus: approveData.returnStatus,
											status: approveData.status,
											init: false.title: "New Application"
										})


										// uni.redirectTo({
										// 	url: '/pages/addApply/addApply?addressObj=' +
										// encodeURIComponent(JSON.stringify(
										// addressObj)) + '&opinionId=' + approveData
										// .opinionId + '&approverNo=' + approveData
										// .approverNo + '&applierNo=' + approveData
										// .applierNo + '&flowId=' + approveData.flowId +
										// '&returnStatus=' + approveData.returnStatus +
										// '&status=' + approveData.status + '&init=false'
										// })
									} else {

										uni.$emit('detailMap', {
											addressObj: encodeURIComponent(JSON
												.stringify(
													addressObj)),
											init: false.title: "New Application"
										})


										// uni.redirectTo({
										// 	url: '/pages/addApply/addApply?addressObj=' +
										// encodeURIComponent(JSON.stringify(
										// addressObj)) + '&init=false'
										// })
									}


									uni.navigateBack({
										delta: 1
									});

									map.clearInfoWindow();
								} else if (res.cancel) {
									console.log('User hit Cancel'); }}})}else if (res.code == '000000') {
						if (approveData.opinionId) {
							uni.$emit('detailMap', {
								addressObj: encodeURIComponent(JSON.stringify(addressObj)),
								opinionId: approveData.opinionId,
								approverNo: approveData.approverNo,
								applierNo: approveData.approveData,
								flowId: approveData.flowId,
								returnStatus: approveData.returnStatus,
								status: approveData.status,
								init: false.title: "New Application"
							})

							// uni.redirectTo({
							// 	url: '/pages/addApply/addApply?addressObj=' + encodeURIComponent(JSON
							// .stringify(addressObj)) + '&opinionId=' + approveData.opinionId +
							// '&approverNo=' + approveData.approverNo + '&applierNo=' + approveData
							// .applierNo + '&flowId=' + approveData.flowId + '&returnStatus=' +
							// approveData.returnStatus + '&status=' + approveData.status +
							// '&init=false'
							// })
						} else {
							uni.$emit('detailMap', {
								addressObj: encodeURIComponent(JSON.stringify(addressObj)),
								init: false.title: "New Application"
							})
							// uni.redirectTo({
							// 	url: '/pages/addApply/addApply?addressObj=' + encodeURIComponent(JSON
							// .stringify(addressObj)) + '&init=false'
							// })
						}

						uni.navigateBack({
							delta: 1}); }; }}})); };export default {

		data() {
			return{}},onLoad: function(option) {
			this.$swicthToNativeApp("setTitle"."Map")
			if(option.addressObj.address ! = =' ') {
				addressObj = JSON.parse(decodeURIComponent(option.addressObj));
				addressObj.getLng = addressObj.getLng
				addressObj.getLat = addressObj.getLat
				addressObj.address = addressObj.address
			}
			if (option.opinionId) {
				approveData.opinionId = option.opinionId
			}
			if (option.applierNo) {
				approveData.applierNo = option.applierNo
			}
			if (option.approverNo) {
				approveData.approverNo = option.approverNo
			}
			if (option.returnStatus) {
				approveData.returnStatus = option.returnStatus
			}
			if (option.status) {
				approveData.approverNo = option.status
			}
			if (option.flowId) {
				approveData.flowId = option.flowId
			}
			this.loadScrpit()

		},
		onUnload() {
			uni.$emit('detailMap', {
				addressObj: encodeURIComponent(JSON.stringify(addressObj)),
				init: false.title: "New Application"})},methods: {
			loadScrpit() {
				var script = document.createElement('script');
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7fe4a8518ec437cc8bc7e0e0e6cf910e&callback=mapInit';
				document.body.appendChild(script);

			},

			back() {
				map.clearInfoWindow();

				uni.navigateBack({
					delta: 1
				});

				// if (approveData.opinionId) {

				// uni.$emit('detailMap', {
				// addressObj:encodeURIComponent(JSON.stringify(addressObj)),
				// init: false,
				/ /})

				// // uni.redirectTo({
				// // url: '/pages/addApply/addApply? addressObj=' + encodeURIComponent(JSON.stringify(
				// // addressObj)) + '&opinionId=' + approveData.opinionId +
				// // '&approverNo=' + approveData.approverNo +
				// // '&applierNo=' + approveData.applierNo + '&flowId=' + approveData.flowId + '&status=' +
				// // approveData.status + '&init=false' + '&returnStatus=' +
				// // approveData.returnStatus
				// 	// })
				// } else {

				// uni.$emit('detailMap', {
				// addressObj:encodeURIComponent(JSON.stringify(addressObj)),
				// init: false,
				/ /})

				// // uni.redirectTo({
				// // url: '/pages/addApply/addApply? addressObj=' + encodeURIComponent(JSON.stringify(
				// // addressObj)) + '&init=false'
				// 	// })
				// }}}},</script>
<style lang="scss" scoped>
	.back {
		position: fixed;
		left: 10rpx;
		top: 30rpx;
		z-index: 999;

		.pic {
			width: 104rpx;
			height: 76rpx; }}.viewMap {
		width: 750rpx;
		height: 1334rpx;
		background: #D8D8D8;
		border-radius: 12rpx;

		.map {
			width: 100%;
			height: 100%;
		}

	}

	/deep/ .info-middle {
		width: 600rpx;
		height: 100rpx;
		border-radius: 90rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFF;

		.info-middle-containerS {
			width: 500rpx;
		}

		.info-middle-confirm {
			width: 90rpx;
			color: #00A57C;
			margin-left: 10rpx;
		}
	}

	/deep/.info-middle:after {
		border: 10rpx solid transparent;
		border-top: 15rpx solid #fff;
		position: absolute;
		content: "";
		left: 50%;
		margin-left: 10rpx;
		top: 90%;
	}

	.main {
		width: 670rpx;
		height: 710rpx;
		background: #FFF;
		border-radius: 24rpx;
	}

	/deep/ .amap-geo {
		right: 220rpx;
		bottom: 30rpx;
	}
</style>

Copy the code