Web-Frontend
H5-Tutorial
Verwenden Sie JSSDK, um den geografischen Standort von Webseiten abzurufen
Verwenden Sie JSSDK, um den geografischen Standort von Webseiten abzurufen
Kopieren Sie eine Kopie der JSSDK-Umgebung und erstellen Sie eine index.html-Datei mit der in Abbildung 7.1 gezeigten Struktur.
Abbildung 7.1 Abschnitt 7.1 Dateistruktur
Kapseln Sie in location.js die Schnittstelle „getLocation“ wie folgt:
01 wxJSSDK.location = function(locationApi){
02 if(wxJSSDK.isReady){ //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
03 if(locationApi){
04 locationApi.getLocation && wx.getLocation({ //获取地理位置接口
05 success: function (res) {
06 locationApi.getLocation.success &&
07 locationApi.getLocation.success(res);
08 }
09 });
10 }else{
11 console.log("缺少配置参数");
12 }
13 }else{
14 console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用位置接口服
15 务。");
16 }
17 }Fügen Sie in der Datei index.html eine Schaltfläche „Geografischen Standort abrufen“ hinzu und zeigen Sie die Standortinformationen nach der Erfassung an:
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <metacharset="UTF-8">
05 <meta name="viewport" content="width=device-width,initial-scale=1.0,
06 minimum-scale=1, maximum-scale=1.0,user-scalable=no">
07 <title>第7章 7.1节 位置操作接口</title>
08 <!--依赖文件：jQuery-->
09 <script src="./js/jquery-1.11.2.min.js?1.1.10"></script>
10 <!--依赖文件：微信的JSSDK源文件-->
11 <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script>
12 <!--依赖文件：coolie-->
13 <script src="./js/cookie.js?1.1.10"></script>
14 <!--JSSDK的环境-->
15 <script src="./js/wxJSSDK.js?1.1.10"></script>
16 <!--引入检测API的位置服务-->
17 <script src="location.js?1.1.10"></script>
18 <style>
19 input{
20 width: 100%;
21 padding: 0.2em;
22 background-color: #5eb95e;
23 font-size: 1.4em;
24 background-image: linear-gradient(to bottom, #62c462, #57a957);
25 background-repeat: repeat-x;
26 color: #ffffff;
27 text-align: center;
28 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29 border-radius: 0.3em;
30 }
31 #info{
32 border-left: 3px solid#03a9f4;
33 background-color: #5eb95e;
34 color: #ffffff;
35 border-radius: 0.3em;
36 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
37 }
38 </style>
39 </head>
40 <body>
41 <h1 style="font-size: 8em">:)</h1>
42 <b style="font-size: 3em">位置操作接口！</b><br/><br />
43 <div id="info">
44 <p>纬度：<em id="latitude">无</em></p>
45 <p>经度：<em id="longitude">无</em></p>
46 <p>速度：<em id="speed">无</em></p>
47 <p>位置精度：<em id="accuracy">无</em></p>
48 </div>
49 <input type="button" value="获取当前地理位置信息" id="getLocation" />
50 </body>
51 </html>
Fügen Sie dann das Antwortereignis in location.js hinzu. Der Code lautet wie folgt:
01 window.onload = function(){
02 var latitude,longitude, speed ,accuracy; // 位置信息初始变量
03 $("#getLocation").click(function(){ // 获取地理位置接口
04 wxJSSDK.location({
05 getLocation:{
06 success:function (res) {
07 latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
08 $("#latitude").html(latitude);
09 longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
10 $("#longitude").html(longitude);
11 speed = res.speed; // 速度，以米/每秒计
12 $("#speed").html(speed);
13 accuracy = res.accuracy; // 位置精度
14 $("#accuracy").html(accuracy);
15 }
16 }
17 });
18 });
19 }
Denken Sie abschließend daran, die „getLocation“-API-Berechtigungen zur JSSDK-Konfigurationsumgebung hinzuzufügen.
[Code-Erklärung]
Nachdem der Standort von „getLocation“ erfolgreich war, werden die relevanten Informationen „Breitengrad“, „Längengrad“, „Geschwindigkeit“ und „Standortgenauigkeit“ zurückgegeben. Nachdem Sie auf die Schaltfläche „Standort abrufen“ geklickt haben, zeigt WeChat eine Eingabeaufforderung an, wie in Abbildung 7.2 dargestellt. Das Ergebnis nach erfolgreichem Erhalt des Ortungsdienstes ist in Abbildung 7.3 dargestellt.
Abbildung 7.2 WeChat JSSDK-Eingabeaufforderung zum Abrufen von Standortinformationen
Abbildung 7.3 Informationen zur erfolgreichen Erfassung von Standortdiensten
"Praktische Webentwicklung der öffentlichen WeChat-Plattform - Entschlüsselung der hybriden HTML5+JSSDK-Entwicklung"
Willkommen, dieses Buch gemeinsam auszutauschen
Das obige ist der detaillierte Inhalt vonVerwenden Sie JSSDK, um den geografischen Standort von Webseiten abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop?
Mar 14, 2024 pm 05:22 PM
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop? Viele unserer Benutzer möchten häufig verwendete Webseiten als Verknüpfungen auf dem Desktop anzeigen, um Zugriffsseiten bequemer öffnen zu können, wissen jedoch nicht, wie das geht. Als Reaktion auf dieses Problem wird der Herausgeber dieser Ausgabe dies mitteilen Werfen wir einen Blick auf den Inhalt des heutigen Software-Tutorials. Die Verknüpfungsmethode zum Senden von Webseiten an den Desktop im Edge-Browser: 1. Öffnen Sie die Software und klicken Sie auf der Seite auf die Schaltfläche „…“. 2. Wählen Sie in der Dropdown-Menüoption „Diese Site als Anwendung installieren“ unter „Anwendung“ aus. 3. Klicken Sie abschließend im Popup-Fenster darauf
Vier empfohlene KI-gestützte Programmiertools
Apr 22, 2024 pm 05:34 PM
Dieses KI-gestützte Programmiertool hat in dieser Phase der schnellen KI-Entwicklung eine große Anzahl nützlicher KI-gestützter Programmiertools zu Tage gefördert. KI-gestützte Programmiertools können die Entwicklungseffizienz verbessern, die Codequalität verbessern und Fehlerraten reduzieren. Sie sind wichtige Helfer im modernen Softwareentwicklungsprozess. Heute wird Dayao Ihnen 4 KI-gestützte Programmiertools vorstellen (und alle unterstützen die C#-Sprache). https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot ist ein KI-Codierungsassistent, der Ihnen hilft, Code schneller und mit weniger Aufwand zu schreiben, sodass Sie sich mehr auf Problemlösung und Zusammenarbeit konzentrieren können. Git
Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen
Mar 15, 2024 am 10:30 AM
Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim Öffnen der Browser-Webseite längere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs Lösungen für das Problem vor, dass Webseitenbilder nicht geladen werden können. Webseitenbilder können nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer geöffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ groß Möglicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden können, liegt das möglicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.
Welche Plattformen zur Erkennung leerer Konten gibt es? Tool zur Erkennung leerer Nummern
Mar 07, 2024 pm 01:46 PM
Mit der Weiterentwicklung der Kommunikationstechnologie ist der Telefonkontakt in unserem täglichen Leben immer häufiger geworden. Manchmal versuchen wir jedoch, eine Nummer anzurufen, stellen dann aber fest, dass die Nummer nicht mehr erreichbar ist. Um Zeit und Energie zu sparen, suchen viele Menschen nach Diensten zur Überprüfung leerer Nummern, um die Gültigkeit der Nummer zu bestätigen. Dieser Dienst kann Benutzern dabei helfen, schnell zu überprüfen, ob eine Nummer gültig ist, und unnötigen Ärger zu vermeiden. 1. Welche Plattformen zur Erkennung leerer Konten gibt es? Benutzer können den offiziellen Auskunftsdienst des Betreibers nutzen, die entsprechende Auskunftsnummer wählen oder die offizielle Website besuchen, um den Status der Nummer zu überprüfen, einschließlich der Frage, ob diese leer ist. Dieser Dienst wird von vielen Betreibern angeboten, um den Benutzern ein schnelles Verständnis der Verwendung der Nummer zu ermöglichen. Online-Plattformen zur Erkennung leerer Nummern tauchen mittlerweile in einem endlosen Strom auf dem Markt auf. Diese Plattformen bieten schnelle und bequeme Funktionen
Welcher KI-Programmierer ist der beste? Entdecken Sie das Potenzial von Devin, Tongyi Lingma und SWE-Agent
Apr 07, 2024 am 09:10 AM
Am 3. März 2022, weniger als einen Monat nach der Geburt von Devin, dem weltweit ersten KI-Programmierer, entwickelte das NLP-Team der Princeton University einen Open-Source-KI-Programmierer-SWE-Agenten. Es nutzt das GPT-4-Modell, um Probleme in GitHub-Repositorys automatisch zu lösen. Die Leistung des SWE-Agenten auf dem SWE-Bench-Testsatz ist ähnlich wie die von Devin, er benötigt durchschnittlich 93 Sekunden und löst 12,29 % der Probleme. Durch die Interaktion mit einem dedizierten Terminal kann der SWE-Agent Dateiinhalte öffnen und durchsuchen, die automatische Syntaxprüfung verwenden, bestimmte Zeilen bearbeiten sowie Tests schreiben und ausführen. (Hinweis: Der obige Inhalt stellt eine geringfügige Anpassung des Originalinhalts dar, die Schlüsselinformationen im Originaltext bleiben jedoch erhalten und überschreiten nicht die angegebene Wortbeschränkung.) SWE-A
Erfahren Sie, wie Sie mobile Anwendungen mit der Go-Sprache entwickeln
Mar 28, 2024 pm 10:00 PM
Tutorial zur Entwicklung mobiler Anwendungen in der Go-Sprache Da der Markt für mobile Anwendungen weiterhin boomt, beginnen immer mehr Entwickler damit, sich mit der Verwendung der Go-Sprache für die Entwicklung mobiler Anwendungen zu befassen. Als einfache und effiziente Programmiersprache hat die Go-Sprache auch großes Potenzial für die Entwicklung mobiler Anwendungen gezeigt. In diesem Artikel wird detailliert beschrieben, wie die Go-Sprache zum Entwickeln mobiler Anwendungen verwendet wird, und es werden spezifische Codebeispiele angehängt, um den Lesern den schnellen Einstieg und die Entwicklung eigener mobiler Anwendungen zu erleichtern. 1. Vorbereitung Bevor wir beginnen, müssen wir die Entwicklungsumgebung und die Tools vorbereiten. Kopf
So öffnen Sie PHP auf der Webseite
Mar 22, 2024 pm 03:20 PM
Um PHP-Code auf einer Webseite auszuführen, muss sichergestellt werden, dass der Webserver PHP unterstützt und ordnungsgemäß konfiguriert ist. PHP kann auf drei Arten geöffnet werden: * **Serverumgebung:** Legen Sie die PHP-Datei im Stammverzeichnis des Servers ab und greifen Sie über den Browser darauf zu. * **Integrierte Entwicklungsumgebung: **Platzieren Sie PHP-Dateien im angegebenen Web-Stammverzeichnis und greifen Sie über den Browser darauf zu. * **Remote-Server:** Greifen Sie über die vom Server bereitgestellte URL-Adresse auf PHP-Dateien zu, die auf einem Remote-Server gehostet werden.
PHP-Praxis: Codebeispiel zur schnellen Implementierung der Fibonacci-Folge
Mar 20, 2024 pm 02:24 PM
PHP-Übung: Codebeispiel zur schnellen Implementierung der Fibonacci-Folge Die Fibonacci-Folge ist eine sehr interessante und häufig vorkommende Folge in der Mathematik. Sie ist wie folgt definiert: Die erste und zweite Zahl sind 0 und 1, und ab der dritten Zahl beginnt jede Zahl ist die Summe der beiden vorherigen Zahlen. Die ersten Zahlen in der Fibonacci-Folge sind 0,1,1,2,3,5,8,13,21 usw. In PHP können wir die Fibonacci-Folge durch Rekursion und Iteration generieren. Im Folgenden zeigen wir diese beiden
