So implementieren Sie die Kartenpositionierung mit jquery-Front-End-Fragen und Antworten-php.cn

So implementieren Sie die Kartenpositionierung mit jquery

PHPz

Freigeben： 2023-04-17 15:59:50

Original

969 Leute haben es durchsucht

Mit der Verbreitung des mobilen Internets ist die Kartenpositionierung zu einem immer beliebter werdenden Dienst geworden und zu einer Grundfunktion vieler Online- und Mobilanwendungen geworden. Als häufig verwendete JavaScript-Bibliothek bietet jquery auch eine umfangreiche Kartenpositionierungs-API. Lassen Sie uns vorstellen, wie Sie mit jquery die Kartenpositionierung implementieren.

1. Einführung der JQuery-Bibliothek und der Karten-API

Bevor wir JQuery für die Kartenpositionierung verwenden, müssen wir die JQuery-Bibliothek und die Karten-API in die Seite einführen. Unter normalen Umständen können wir es direkt aus dem Internet importieren:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

Nach dem Login kopieren

Im obigen Code haben wir die JQuery-Bibliothek und die Amap-API eingeführt und einen von uns selbst angewendeten Schlüsselwert verwendet, um die Identität zu überprüfen.

2. Erstellen Sie einen Kartencontainer

Erstellen Sie einen Container zum Anzeigen der Karte auf der Seite, der ein Div, eine Leinwand und andere Tags sein kann, zum Beispiel: #🎜🎜 #

<div id="mapContainer" style="width: 100%; height: 300px;"></div>

Nach dem Login kopieren

#🎜 🎜#Im obigen Code haben wir ein div-Tag mit der ID „mapContainer“ erstellt, um die Karte anzuzeigen und die Breite und Höhe festzulegen.

3. Initialisieren Sie die Karte

Nach Abschluss der Erstellung des Kartencontainers müssen wir jquery verwenden, um die Karte zu initialisieren:

var map = new AMap.Map("mapContainer", {
            resizeEnable: true,
            zoom: 10, //设置地图缩放级别
            center: [116.397428, 39.90923] //设置地图中心点坐标
        });

Nach dem Login kopieren

Im obigen Code haben wir die Funktion AMap.Map() verwendet, um die Karte zu initialisieren und einige Konfigurationen vorzunehmen, wie z. B. das Festlegen der Zoomstufe, der Mittelpunktkoordinaten usw.

4. Erhalten Sie den aktuellen Standort über den Browser

Nach Abschluss der Initialisierung der Karte müssen wir die Standortinformationen des aktuellen Geräts abrufen, die über erreicht werden können Die vom Browser bereitgestellte API lautet wie folgt:

if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var longitude = position.coords.longitude; //获取经度
                var latitude = position.coords.latitude; //获取纬度
                var accuracy = position.coords.accuracy; //获取精度
                map.setZoomAndCenter(18, [longitude, latitude]); //设置地图缩放级别和中心坐标
                var marker = new AMap.Marker({
                    position: [longitude, latitude], //设置标记的坐标
                    map: map //设置标记所属的地图对象
                });
            },function (error) {
                switch (error.code) {
                    case 1:
                        console.log("位置服务被拒绝");
                        break;
                    case 2:
                        console.log("暂时获取不到位置信息");
                        break;
                    case 3:
                        console.log("获取信息超时");
                        break;
                    case 4:
                        console.log("未知错误");
                        break;
                }
            });
        }

Nach dem Login kopieren

Im obigen Code ermitteln wir, ob der Browser das Abrufen geografischer Standortinformationen unterstützt. Sofern unterstützt, verwenden wir die Funktion getCurrentPosition(), um den Längen- und Breitengrad sowie die Genauigkeit des aktuellen Standorts zu ermitteln, und legen die Mittelkoordinaten und Markierungen der Karte über die Funktionen setZoomAndCenter() und AMap.Marker() fest.

5. Der vollständige Code für die Kartenpositionierung

Das Folgende ist der vollständige Code für JQuery zum Implementieren der Kartenpositionierung:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery实现地图定位</title>
    <style type="text/css">
        #mapContainer{
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script>
        $(function () {
            //初始化地图
            var map = new AMap.Map("mapContainer", {
                resizeEnable: true,
                zoom: 10,
                center: [116.397428, 39.90923]
            });

            //获取当前位置
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var longitude = position.coords.longitude; //获取经度
                    var latitude = position.coords.latitude; //获取纬度
                    var accuracy = position.coords.accuracy; //获取精度
                    map.setZoomAndCenter(18, [longitude, latitude]); //设置地图缩放级别和中心坐标
                    var marker = new AMap.Marker({
                        position: [longitude, latitude],
                        map: map
                    });
                },function (error) {
                    switch (error.code) {
                        case 1:
                            console.log("位置服务被拒绝");
                            break;
                        case 2:
                            console.log("暂时获取不到位置信息");
                            break;
                        case 3:
                            console.log("获取信息超时");
                            break;
                        case 4:
                            console.log("未知错误");
                            break;
                    }
                });
            }
        });
    </script>
</body>
</html>

Nach dem Login kopieren

6. Fazit # 🎜🎜## 🎜🎜#In diesem Artikel werden die Methode und der Code zur Implementierung der Kartenpositionierung mit jquery vorgestellt. Ich hoffe, dass er für alle in Ihrem Studium oder Ihrer Arbeit hilfreich ist. Natürlich bietet die von jquery bereitgestellte Kartenpositionierungs-API weit mehr und umfangreichere Funktionen. Weitere Informationen finden Sie in der offiziellen Dokumentation von jquery.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kartenpositionierung mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!