recherche

Maison >interface Web >Questions et réponses frontales >Comment utiliser jquery pour implémenter le positionnement sur la carte

Comment utiliser jquery pour implémenter le positionnement sur la carte

PHPz
PHPzoriginal
2023-04-17 15:21:231014parcourir

Avec la popularité de l'Internet mobile, le positionnement cartographique est devenu un service de plus en plus populaire et une fonction de base de nombreuses applications en ligne et mobiles. En tant que bibliothèque JavaScript couramment utilisée, jquery fournit également une riche API de positionnement de carte. Présentons comment utiliser jquery pour implémenter le positionnement de carte.

1. Présentez la bibliothèque jquery et l'API de carte

Avant d'utiliser jquery pour le positionnement de la carte, nous devons introduire la bibliothèque jquery et l'API de carte dans la page. Dans des circonstances normales, nous pouvons l'importer directement depuis Internet : 

<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>

Dans le code ci-dessus, nous avons introduit la bibliothèque jquery et l'API Amap, et utilisé une valeur clé appliquée par nous-mêmes pour la vérification d'identité.

2. Créez un conteneur de carte

Créez un conteneur pour afficher la carte sur la page, qui peut être une balise div, un canevas ou d'autres balises, par exemple : 

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

Dans le code ci-dessus, nous avons créé une balise div avec le id "mapContainer" , utilisé pour afficher la carte et définir la largeur et la hauteur.

3. Initialiser la carte

Après avoir terminé la création du conteneur de carte, nous devons utiliser jquery pour initialiser la carte. Le code est le suivant : 

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

Dans le code ci-dessus, nous avons utilisé AMap.Map(). fonction pour initialiser la carte et effectuer certaines configurations, telles que le réglage du niveau de zoom, les coordonnées du point central, etc.

4. Obtenez l'emplacement actuel via le navigateur

Après avoir terminé l'initialisation de la carte, nous devons obtenir les informations de localisation de l'appareil actuel, qui peuvent être obtenues via l'API fournie par le navigateur. : 

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;
                }
            });
        }

Dans le code ci-dessus, nous avons jugé si le navigateur prend en charge l'obtention d'informations de localisation géographique. Si cela est pris en charge, nous obtenons la longitude, la latitude, la précision et d'autres informations de l'emplacement actuel via la fonction getCurrentPosition(), et définissons les coordonnées centrales et les marqueurs de la carte via la fonction setZoomAndCenter() et la fonction AMap.Marker().

5. Le code complet pour le positionnement sur la carte

Ce qui suit est le code complet pour que jquery implémente le positionnement sur la carte :

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

6. Conclusion

Cet article présente la méthode et le code d'utilisation de jquery pour implémenter le positionnement sur la carte. J'espère que cela sera utile à tout le monde dans votre étude ou votre travail. Bien sûr, l'API de positionnement cartographique fournie par jquery est bien plus que cela. Elle a des fonctions plus nombreuses et plus riches. Vous pouvez en savoir plus en consultant la documentation officielle de jquery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Que diriez-vous d’un ingénieur web front-end ?Article suivant：Que diriez-vous d’un ingénieur web front-end ?

Articles Liés

Voir plus