Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie mit JS und Amap die Empfehlungsfunktion beliebter Attraktionen an Standorten

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

PHPz
PHPzOriginal
2023-11-21 10:33:59742Durchsuche

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>' + 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!

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