Heim > Artikel > Web-Frontend > So verwenden Sie JS und Amap, um die Standortpositionierungsfunktion zu implementieren

So verwenden Sie JS und Amap, um die Standortpositionierungsfunktion zu implementieren

王林Original: 2023-11-21 12:16:001505Durchsuche

1. Einführung
Mit der Entwicklung des Internets ist die Kartenpositionierungsfunktion zu einer unverzichtbaren Funktion für viele Websites und Anwendungen geworden. Heute stellen wir Ihnen vor, wie Sie JS und die Amap-API verwenden, um die Standortpositionierungsfunktion zu implementieren. In diesem Artikel werden die Vorbereitungsarbeiten, das Erhalten des Amap-API-Schlüssels, das Erstellen einer Karte, das Hinzufügen von Markierungen, das Hinzufügen von Informationsfenstern und das Lokalisieren des Benutzerstandorts ausführlich erläutert und relevante Codebeispiele bereitgestellt.

2. Vorbereitung
Bevor wir beginnen, müssen wir sicherstellen, dass wir die folgenden Vorbereitungen haben:

Ein gültiges Amap-Entwicklerkonto und die Anwendung wurde erstellt.
Ein browserfähiger Texteditor wie Sublime Text oder Visual Studio Code.
Grundkenntnisse in HTML, CSS und JavaScript.

3. Erhalten Sie den API-Schlüssel von Amap.

Öffnen Sie die offizielle Website von AMAP Developer (https://lbs.amap.com/), melden Sie sich an oder registrieren Sie ein Konto.
Erstellen Sie eine neue Anwendung und wählen Sie den Webdiensttyp aus.
Suchen Sie auf der Seite mit den Anwendungsdetails die Spalte „Entwicklerschlüssel“ und kopieren Sie den generierten API-Schlüssel.

4. Erstellen Sie eine Karte

Fügen Sie in der HTML-Datei, in der Sie eine Karte hinzufügen müssen, den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>地点定位</title>
 <style type="text/css">
     #map{
         width: 800px;
         height: 500px;
     }
 </style>
</head>
<body>
 <div id="map"></div>
</body>
</html>

Fügen Sie in Ihrer JavaScript-Datei den folgenden Code hinzu (Einführung in die API von Amap). :
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>
```
Fügen Sie in der JavaScript-Datei den folgenden Code hinzu (erstellen Sie die Karte):
```
var map = new AMap.Map('map',{
 center: [经度, 纬度],
 zoom: 缩放级别
});
```
wobei [Längengrad, Breitengrad] den Mittelpunkt der Karte darstellt und die Zoomstufe die Anzeigeebene der Karte bestimmt.

5. Markierung hinzufügen

Fügen Sie in der JavaScript-Datei den folgenden Code hinzu (Markierung erstellen):
```
var marker = new AMap.Marker({
 position: [经度, 纬度]
});
marker.setMap(map);
```
wobei [Längengrad, Breitengrad] die Position der Markierung darstellt.

6. Informationsfenster hinzufügen

Fügen Sie in der JavaScript-Datei den folgenden Code hinzu (Informationsfenster erstellen):
```
var infoWindow = new AMap.InfoWindow({
 content: '这里是信息窗口的内容'
});
```
Für den Fall, dass das Informationsfenster ausgelöst werden muss, fügen Sie den folgenden Code hinzu:
```
marker.on('click', function(){
 infoWindow.open(map, marker.getPosition());
});
```

7. Benutzerstandort ermitteln

Fügen Sie in der JavaScript-Datei den folgenden Code hinzu (Benutzerstandort ermitteln):

AMap.plugin('AMap.Geolocation', function() {
 var geolocation = new AMap.Geolocation({
     enableHighAccuracy: true, // 是否使用高精度定位，默认为false
     timeout: 10000, // 超过10秒后停止定位，默认为无穷大
     maximumAge: 0, // 定位结果缓存0毫秒，默认值为0
     convert: true, // 自动偏移坐标是否转换，默认为true
     showButton: true, // 显示定位按钮，默认为true
     buttonPosition: 'LB', // 定位按钮停靠位置，默认为'LB'，左下角
     buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量，默认为Pixel(10, 20)
     showMarker: true, // 定位成功后在定位到的位置显示点标记，默认为true
     showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认为true
     panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认为true
     zoomToAccuracy:true // 定位成功后将定位精度范围显示在地图上，默认为true
 });
 map.addControl(geolocation);
 geolocation.getCurrentPosition();
 AMap.event.addListener(geolocation, 'complete', onComplete);
 AMap.event.addListener(geolocation, 'error', onError);
});
function onComplete(data) {
 var lnglat = data.position;
 var marker = new AMap.Marker({
     position: lnglat
 });
 marker.setMap(map);
}
function onError(error) {
 console.log('定位失败');
}

8. Zusammenfassung
Durch die Einführung dieses Artikels haben wir die Verwendung gelernt JS- und Amap-API zur Implementierung von Standort-GPS. Wir haben uns über die Vorbereitungsarbeiten, das Erhalten des Amap-API-Schlüssels, das Erstellen einer Karte, das Hinzufügen von Markierungen, das Hinzufügen von Informationsfenstern und das Lokalisieren des Standorts des Benutzers informiert und entsprechende Codebeispiele bereitgestellt. Ich glaube, dass Leser die Standortpositionierungsfunktion basierend auf dem in diesem Artikel bereitgestellten Inhalt leicht implementieren können. Ich hoffe, dieser Artikel ist hilfreich für Sie, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS und Amap, um die Standortpositionierungsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html JS 事件 visual studio visual studio code sublime text https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie JS und Baidu Maps, um benutzerdefinierte Standortmarkierungen zur Karte hinzuzufügenNächster Artikel：So verwenden Sie JS und Baidu Maps, um benutzerdefinierte Standortmarkierungen zur Karte hinzuzufügen

In Verbindung stehende Artikel

Mehr sehen