Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

Hintergrund zum Schreiben

.Das vorherige Projekt verwendete Tencent Maps, was sich recht nützlich anfühlte, aber die meisten offiziellen Demos waren native js und relativ einfach, und viele erweiterte APIs waren verstreut, was es für Entwickler schwierig machte, sie zu finden. Also verwendete ich Vue in Kombination mit dem Online-Open-Source-Framework Vue-admin, um das offizielle zu imitieren und eine gebrauchsfertige Demo-Sammlung zu erstellen. Wenn Sie das Projekt herunterladen, wird eine Anmeldeoberfläche angezeigt. Geben Sie einfach sechs Zeichen ein (ich bin zu faul, sie zu entfernen, es ist zu spät).

Projektvorschau

Sie können den Code direkt von dieser Adresse abrufen und kopieren und einfügen.

Projektbeschreibung

Aufgrund der begrenzten Zeit des Autors wurden bisher nur vier Module aussortiert (wenn die Wirkung gut ist, werde ich weiter aktualisieren. Ich begrüße, dass alle taoistischen Freunde Probleme ansprechen, und ich werde sie rechtzeitig lösen, wenn ich sie sehe):

• Grundlegende Karteneinführung und Anzeigemodul
• 3D/2D-Umschaltung und Effektvergleich
• Einige grundlegende APIs zu Standortdiensten sind: Aktuellen Standort lokalisieren, Anfangsstandort lokalisieren, Mittelpunkt lokalisieren, Mausklickereignisse hinzufügen, zwischen dem Ausblenden und Anzeigen von Kartentext wechseln
• Die grundsätzliche Verwendung einer Markierung ist: Markierung hinzufügen, Ereignis „Markierung hinzufügen“ beenden und Markierungspunkt verschiebbar machen.

Vorbereitende Maßnahmen

Klicken Sie auf diesen Link, um ein Tencent Maps-Entwicklerkonto zu registrieren

Notiz

Dies ist eine Demo der Vue-Integration von Tencent Maps
Der folgende Inhalt muss in die index.html des Projekts eingefügt werden

 <script src="https://map.qq.com/api/gljs?v=1.exp&key=Der Schlüsselwert, den Sie nach der Registrierung erhalten"></script>
 <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=Der Schlüsselwert, den Sie nach der Registrierung erhalten"></script>

Schreiben Sie dann diese Codezeilen in die Datei main.js

Vue.prototype.$Map = Fenster.TMap
Vue.prototype.$Location = neues Fenster.qq.maps.Geolocation('Ihr eigener Schlüssel', 'Tencent-Kartenvorlage – Blog-Anzeige')

Bitte denken Sie noch einmal daran, dass Sie auf diesen Link klicken können, um ein Tencent Map-Entwicklerkonto zu registrieren.

An diesem Punkt des Buches sollten die meisten von Ihnen in der Lage sein, Tencent Maps durch einfaches Kopieren und Einfügen problemlos auszuführen.

Nachfolgend das Update vom 16. Januar 2021

Um diesen Dienst aufzurufen, müssen Sie über ein Entwicklerkonto verfügen und einen eigenen Schlüssel beantragen. Hier finden Sie die Antragsadresse und die spezifischen Verwendungshinweise:
Wird durch die Get-Methode aufgerufen:

{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=Ihr Schlüssel&get_poi=1'}

Bei der inversen Positionsanalyse gibt es mehrere Fallstricke, die hier aufgeführt sind:

Die erste große Falle ist Cross-Domain. Ich weiß nicht, ob ich der Einzige bin, der dieses Problem hat. Wenn beim lokalen Starten des Projekts die Adresse mit umgekehrter Auflösung aufgerufen wird, wird ein Cross-Domain-Problem gemeldet. Sie müssen den Cross-Domain-Code im Programm wie folgt konfigurieren: Konfigurieren Sie Cross-Domain in vue.config.js (Wenn Sie ein Freund mit einer niedrigen CLI-Version sind, suchen Sie bitte selbst online nach Lösungen. Es ist bereits ziemlich vollständig, daher werde ich hier nicht ins Detail gehen.)

devServer: {
    Hafen: Hafen,
    offen: wahr,
    Überlagerung:
      Warnungen: falsch,
      Fehler: wahr
    },
    Proxy: { //Domänenübergreifendes Konfigurieren '/qq': {
        Ziel: 'https://apis.map.qq.com/', // Die Hintergrundadresse hier ist simuliert. Sie sollten Ihre echte Hintergrundschnittstelle eingeben ws: true,
        changOrigin: true, // Domänenübergreifendes PathRewrite zulassen: {
          '^/qq': '' // Diese API bei Anfragen verwenden}}
    },

Der zweite Big Pit-Autorisierungsfehlermeldetyp lautet wie folgt

 	{
    "Status": 110,
    "message": "Die Anfragequelle ist nicht autorisiert, der Domänenname der Anfragequelle: localhost9528"
	}

 	{
    "Status": 112,
    "message": "IP ist nicht autorisiert, aktuelle IP: 127.0.0.1"
	}

 {
    "Status": 111,
    "message": "Signaturüberprüfung fehlgeschlagen"
  }

Die Lösung besteht darin, die Tencent-Standortdienstplattform zu verwenden und die Schlüsselverwaltung in Kombination mit offiziellen Dokumenten zu konfigurieren, wie in der Abbildung dargestellt

Detaillierte API-Parameter finden Sie in der offiziellen Dokumentation.

Dies ist das Ende dieses Artikels über die Vue-Integration von Tencent Maps zur Implementierung der API (mit DEMO). Weitere relevante Inhalte zur Vue-Integration von Tencent Maps finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!