Maison > Article > interface Web > Comment utiliser JS et Amap pour implémenter la fonction de positionnement

Comment utiliser JS et Amap pour implémenter la fonction de positionnement

王林original: 2023-11-21 12:16:001493parcourir

Comment utiliser JS et Amap pour implémenter la fonction de positionnement géographique

1. Introduction
Avec le développement d'Internet, la fonction de positionnement cartographique est devenue une fonctionnalité incontournable pour de nombreux sites Web et applications. Aujourd'hui, nous allons présenter comment utiliser JS et l'API Amap pour implémenter la fonction de positionnement. Cet article expliquera en détail le travail de préparation, l'obtention de la clé API Amap, la création d'une carte, l'ajout de marqueurs, l'ajout de fenêtres d'informations et la localisation de l'emplacement de l'utilisateur, et fournira des exemples de code pertinents.

2. Préparation
Avant de commencer, nous devons nous assurer que nous avons les préparations suivantes :

Un compte développeur Amap valide et l'application a été créée.
Un éditeur de texte compatible avec un navigateur comme Sublime Text ou Visual Studio Code.
Connaissance de base de HTML, CSS et JavaScript.

3. Obtenez la clé API d'Amap

Ouvrez le site officiel d'AMAP Developer (https://lbs.amap.com/), connectez-vous ou créez un compte.
Créez une nouvelle application et sélectionnez le type de service Web.
Sur la page de détails de l'application, recherchez la colonne "Clé de développeur" et copiez la clé API générée.

4. Créer une carte

Dans le fichier HTML où vous devez ajouter une carte, ajoutez le code suivant :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>地点定位</title>
 <style type="text/css">
     #map{
         width: 800px;
         height: 500px;
     }
 </style>
</head>
<body>
 <div id="map"></div>
</body>
</html>

Dans votre fichier JavaScript, ajoutez le code suivant (présentant l'API d'Amap) :
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>
```
Dans le fichier JavaScript, ajoutez le code suivant (créer la carte) :
```
var map = new AMap.Map('map',{
 center: [经度, 纬度],
 zoom: 缩放级别
});
```
où [longitude, latitude] représente le point central de la carte, et le niveau de zoom détermine le niveau d'affichage de la carte.

5. Ajouter une marque

Dans le fichier JavaScript, ajoutez le code suivant (créer une marque) :
```
var marker = new AMap.Marker({
 position: [经度, 纬度]
});
marker.setMap(map);
```
où [longitude, latitude] représente l'emplacement de la marque.

6. Ajouter une fenêtre d'information

Dans le fichier JavaScript, ajoutez le code suivant (créer une fenêtre d'information) :
```
var infoWindow = new AMap.InfoWindow({
 content: '这里是信息窗口的内容'
});
```
Dans le cas où il est nécessaire de déclencher la fenêtre d'information, ajoutez le code suivant :
```
marker.on('click', function(){
 infoWindow.open(map, marker.getPosition());
});
```

7. Localiser l'emplacement de l'utilisateur

Dans le fichier JavaScript, ajoutez le code suivant (localiser l'emplacement de l'utilisateur) :

AMap.plugin('AMap.Geolocation', function() {
 var geolocation = new AMap.Geolocation({
     enableHighAccuracy: true, // 是否使用高精度定位，默认为false
     timeout: 10000, // 超过10秒后停止定位，默认为无穷大
     maximumAge: 0, // 定位结果缓存0毫秒，默认值为0
     convert: true, // 自动偏移坐标是否转换，默认为true
     showButton: true, // 显示定位按钮，默认为true
     buttonPosition: 'LB', // 定位按钮停靠位置，默认为'LB'，左下角
     buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量，默认为Pixel(10, 20)
     showMarker: true, // 定位成功后在定位到的位置显示点标记，默认为true
     showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认为true
     panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认为true
     zoomToAccuracy:true // 定位成功后将定位精度范围显示在地图上，默认为true
 });
 map.addControl(geolocation);
 geolocation.getCurrentPosition();
 AMap.event.addListener(geolocation, 'complete', onComplete);
 AMap.event.addListener(geolocation, 'error', onError);
});
function onComplete(data) {
 var lnglat = data.position;
 var marker = new AMap.Marker({
     position: lnglat
 });
 marker.setMap(map);
}
function onError(error) {
 console.log('定位失败');
}

8. Résumé
Grâce à l'introduction de cet article, nous avons appris à utiliser API JS et Amap pour implémenter la fonction de positionnement des emplacements. Nous avons découvert le travail de préparation, l'obtention de la clé API Amap, la création d'une carte, l'ajout de marqueurs, l'ajout de fenêtres d'informations et la localisation de l'emplacement de l'utilisateur, et avons fourni des exemples de code correspondants. Je pense que les lecteurs peuvent facilement mettre en œuvre la fonction de positionnement géographique en fonction du contenu fourni dans cet article. J'espère que cet article vous sera utile, merci d'avoir lu !

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!

JavaScript css html JS 事件 visual studio visual studio code sublime text https

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：Comment utiliser JS et Baidu Maps pour ajouter des marqueurs de localisation personnalisés à la carteArticle suivant：Comment utiliser JS et Baidu Maps pour ajouter des marqueurs de localisation personnalisés à la carte

Articles Liés

Voir plus