` `
<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
'