Einführung in die Seite der Datei index.html
< script type= "text/javascript" >
window. _AMapSecurityConfig = {
securityJsCode : '高德地图安全密钥' ,
}
< / script>
< script type= "text/javascript"
src= 'https://webapi.amap.com/maps?v=1.4.11&key=高德地图key&plugin=AMap.Geolocation,AMap.Geocoder' > < / script>
Die gekapselte Utils-Methode vergleicht den Abstand zwischen zwei Längen- und Breitengraden und wird zur Positionierung und Öffnung verwendet.
export function limits ( location1, location2, width ) {
let geocoder = new AMap. Geocoder ( {
} ) ;
geocoder. getLocation ( location1, function ( status, result ) {
if ( status === 'complete' && result. geocodes. length) {
let lnglat1 = result. geocodes[ 0 ] . location;
geocoder. getLocation ( location2, function ( status, result ) {
if ( status === 'complete' && result. geocodes. length) {
let lnglat2 = result. geocodes[ 0 ] . location;
let distance = AMap. GeometryUtil. distance ( lnglat1, lnglat2) ;
console. log ( "两点之间的距离:" + distance. toFixed ( 2 ) + "米" ) ;
if ( distance. toFixed ( 2 ) - width > 0 ) {
return false
} else {
return true
}
} else {
console. log ( "地址2解析失败" ) ;
return false
}
} ) ;
} else {
console. log ( "地址1解析失败" ) ;
return false
}
} ) ;
}
Breiten- und Längengrad, analysiert in Adressen
geocoder. getAddress ( [ lng, lat] , function ( status, result ) {
console. log ( status, result, 'distance' ) ;
if ( status === 'complete' && result. info === 'OK' ) {
let address = result. regeocode. formattedAddress;
resolve ( address)
} else {
resolve ( false )
}
} ) ;
Positionierung, um Informationen wie Längengrad, Breitengrad und detaillierte Adresse des Benutzers zu erhalten
getLocation ( id ) {
let geolocation = new AMap. Geolocation ( {
enableHighAccuracy : true ,
timeout : 10000 ,
offset : [ 10 , 20 ] ,
zoomToAccuracy : true ,
position : 'RB'
} )
geolocation. getCurrentPosition ( function ( status, result ) {
console. log ( status, result, '111' ) ;
if ( status == 'complete' ) {
let newCity = result. formattedAddress
let location = result. position. lng + ',' + result. position. lat
} else {
}
} ) ;
Längen- und Breitengrad geben den erweiterten Kartenstandort wieder
< div id= "map-container" > < / div>
setTimeout ( ( ) => {
const map = new AMap. Map ( 'map-container' , {
viewMode : '3D' ,
zoom : 16 ,
center : [ lng, lat] ,
} ) ;
let marker = new AMap. Marker ( {
position : [ lng, lat] ,
title : '这里是我的位置'
} ) ;
marker. setMap ( map) ;
} , 0 ) ;
Passen Sie die Auswahl des geografischen Standorts an, um Längen- und Breitengrade sowie detaillierte Adressen zu erhalten
< avue- input- map : params= "params"
: placeholder= "placeholder"
v- model= "locationInfo" >
< / avue- input- map>
params : {
zoom : 10 ,
zoomEnable : true ,
dragEnable : true ,
} ,