So implementieren Sie mit JS und Amap die Empfehlungsfunktion beliebter Attraktionen an Standorten

Um mit JS und Amap die Empfehlungsfunktion für beliebte Attraktionen zu implementieren, benötigen Sie spezifische Codebeispiele

1 Einführung
Mit der Entwicklung des Tourismus reisen immer mehr Menschen gerne unabhängig und hoffen, lokale Orte zu finden Attraktionen für eine bessere Reiseplanung. In diesem Artikel werden JavaScript und die Amap-API verwendet, um eine beliebte Empfehlungsfunktion für Attraktionen zu implementieren.

2. Implementierungsprozess

1. Registrieren Sie ein Entwicklerkonto
   Zuerst müssen wir ein Entwicklerkonto auf der offenen Amap-Plattform registrieren. Nach erfolgreicher Registrierung können Sie einen API-Schlüssel erhalten, der ein erforderlicher Parameter für den Aufruf der Amap-API ist.

2. Einführung der Amap-API
   Die Einführung der Amap-API in das HTML-Dokument kann durch den folgenden Code erreicht werden:

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

   Ersetzen Sie YOUR_API_KEY durch Ihren eigenen API-Schlüssel.

3. Erstellen Sie einen Kartencontainer.
   Erstellen Sie ein DOM-Element im HTML-Dokument als Kartencontainer:

   <div id="map" style="width: 600px; height: 400px;"></div>

   Hier werden die Breite und Höhe des Containers festgelegt.

4. Initialisieren Sie die Karte
   Initialisieren Sie die Karte im JavaScript-Code, geben Sie den Mittelpunkt der Karte, die Zoomstufe und die ID des Kartencontainers an:

   var map = new AMap.Map('map', {
     center: [116.397428, 39.90923],
     zoom: 13
   });

   Die Breiten- und Längenkoordinaten hier sind die Koordinaten von Peking.

5. Positionierungssteuerung hinzufügen
   Um die Positionierung zu erleichtern, können Sie der Karte eine Positionierungssteuerung hinzufügen:

   AMap.plugin('AMap.Geolocation', function() {
     var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000
     });
   
     map.addControl(geolocation);
   
     geolocation.getCurrentPosition(function(status, result) {
    if (status === 'complete') {
      // 定位成功，更新地图中心点
      map.setCenter(result.position);
    }
     });
   });

   Erstellen Sie durch Aufrufen der AMap.Geolocation-Klasse eine Geolocation-Instanz und fügen Sie sie der Karte hinzu. Rufen Sie dann die Methode getCurrentPosition auf, um den Breiten- und Längengrad des aktuellen Standorts abzurufen, und legen Sie den Kartenmittelpunkt auf den aktuellen Standort fest.

6. Beliebte Attraktionsmarkierungen hinzufügen
   Als nächstes müssen wir die Daten beliebter Attraktionen abrufen und Markierungen auf der Karte hinzufügen. Normalerweise können diese Daten über die Backend-API abgerufen werden. Hier werden simulierte Attraktionsdaten verwendet:

   var hotSpots = [
     {
    name: '故宫',
    location: [116.397428, 39.90923]
     },
     {
    name: '天安门广场',
    location: [116.397978, 39.903258]
     },
     {
    name: '颐和园',
    location: [116.272328, 39.991455]
     }
   ];

   Verwenden Sie eine for-Schleife, um die Daten zu durchlaufen, erstellen Sie dann eine Markierung und fügen Sie sie der Karte hinzu:

   for (var i = 0; i < hotSpots.length; i++) {
     var marker = new AMap.Marker({
    position: hotSpots[i].location,
    title: hotSpots[i].name
     });
   
     map.add(marker);
   }

7. Fügen Sie ein Klickereignis hinzu
   Um dem Benutzer die Anzeige zu ermöglichen die detaillierten Informationen der Attraktion, wenn er auf die Markierung klickt. Wir können jeder Markierung ein Klickereignis hinzufügen, um beim Klicken ein Popup-Fenster anzuzeigen:

   AMap.event.addListener(marker, 'click', function() {
     var infoWindow = new AMap.InfoWindow({
    content: '<h3 id="marker-getTitle">' + marker.getTitle() + '</h3>'
     });
   
     infoWindow.open(map, marker.getPosition());
   });

   Hier verwenden wir die AMap.event.addListener-Methode, um ein Klickereignis hinzuzufügen Wenn der Benutzer auf die Markierung klickt, wird eine InfoWindow-Instanz erstellt und über die Open-Methode auf der Karte angezeigt.

8. Endeffekt
   Durch die oben genannten Schritte haben wir die Funktion zur Empfehlung beliebter Attraktionen an Standorten erfolgreich implementiert. Der Karte werden Markierungen beliebter Attraktionen hinzugefügt und durch Klicken auf die Markierungen werden detaillierte Informationen zu den Attraktionen angezeigt.

3. Zusammenfassung
Dieser Artikel verwendet JavaScript und die Amap-API, um die Empfehlungsfunktion beliebter Attraktionen in wenigen einfachen Schritten zu implementieren. In tatsächlichen Projekten können wir je nach spezifischem Bedarf andere Funktionen der Amap-API aufrufen, um mehr Karteninteraktion und Datenanzeigeeffekte zu erzielen. Ich hoffe, dass dieser Artikel Anfängern eine Hilfe sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit JS und Amap die Empfehlungsfunktion beliebter Attraktionen an Standorten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!