Comment utiliser JS et Amap pour afficher les limites des circonscriptions administratives dans des emplacements

Comment utiliser JS et Amap pour réaliser la fonction d'affichage des limites des circonscriptions administratives des localités

Avec le développement d'Internet, les services de cartographie sont progressivement devenus un élément indispensable de la vie quotidienne des gens. Dans le développement Web, nous devons souvent utiliser l’API cartographique pour afficher des informations de localisation géographique. Cet article expliquera comment utiliser JS et Amap pour implémenter la fonction d'affichage des limites du district administratif de localisation et fournira des exemples de code spécifiques.

1. Préparation
   Tout d'abord, nous devons enregistrer un compte développeur sur la plateforme ouverte AMAP (https://lbs.amap.com/) et créer une application. Après avoir créé l'application, nous pouvons obtenir une clé unique qui sera appelée dans notre code JS.
2. Présentez la bibliothèque API Amap
   Dans la balise du HTML, nous devons introduire la bibliothèque API Amap JS. Le code spécifique est le suivant :

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key"></script>

Remplacez votre-clé par la Clé de la carte Amap que vous avez obtenue. your-key替换成你获取到的高德地图的Key。

3. 创建地图容器
   在HTML中，我们需要为地图创建一个容器。可以使用一个div标签，给它指定一个唯一的ID，并设置相应的样式。具体代码如下：

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

4. 初始化地图对象
   在JS代码中，我们需要初始化一个地图对象。具体代码如下：

// 创建地图对象
var map = new AMap.Map('mapContainer', {
    zoom: 11, // 缩放级别
    center: [116.397428, 39.90923] // 地图中心点坐标
});

在上面的代码中，我们设置了地图的缩放级别为11，并且将地图显示的中心点设为了[116.397428, 39.90923]，即北京市的坐标。

5. 添加行政区边界图层
   高德地图提供了AMap.DistrictLayer类，可以用来添加行政区边界图层。具体代码如下：

// 创建行政区图层
var districtLayer = new AMap.DistrictLayer();

// 设置图层样式
districtLayer.setStyles({
    'fill': 'rgba(255, 0, 0, 0.3)', // 填充颜色
    'stroke': '#ff0000', // 边界线颜色
    'strokeWeight': 1 // 边界线宽度
});

// 将图层添加到地图上
districtLayer.setMap(map);

// 设置要显示的行政区域
districtLayer.setDistrictByCityCode('citycode');

在上面的代码中，我们首先创建了一个行政区图层对象。然后，设置了图层的样式，包括填充颜色和边界线颜色。接着，将图层添加到地图上。最后，调用setDistrictByCityCode方法，传入相应的城市代码，来设置要显示的行政区域。你可以在高德地图开放平台上找到相应城市的城市代码。

6. 完整示例代码

    
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key"></script>



    


    <script>
        // 创建地图对象
        var map = new AMap.Map('mapContainer', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 地图中心点坐标
        });

        // 创建行政区图层
        var districtLayer = new AMap.DistrictLayer();

        // 设置图层样式
        districtLayer.setStyles({
            'fill': 'rgba(255, 0, 0, 0.3)', // 填充颜色
            'stroke': '#ff0000', // 边界线颜色
            'strokeWeight': 1 // 边界线宽度
        });

        // 将图层添加到地图上
        districtLayer.setMap(map);

        // 设置要显示的行政区域，这里以北京市为例
        districtLayer.setDistrictByCityCode('110000');
    </script>

上述示例代码中的your-key和110000

Créer un conteneur de carte

En HTML, nous devons créer un conteneur pour la carte. Vous pouvez utiliser une balise div, lui attribuer un identifiant unique et définir le style correspondant. Le code spécifique est le suivant :

🎜rrreee
🎜Initialiser l'objet cartographique🎜Dans le code JS, nous devons initialiser un objet cartographique. Le code spécifique est le suivant : 🎜🎜rrreee🎜Dans le code ci-dessus, nous définissons le niveau de zoom de la carte sur 11 et définissons le point central de l'affichage de la carte sur [116.397428, 39.90923], qui sont les coordonnées de Pékin. 🎜
🎜Ajouter une couche de limites de district administratif🎜Amap fournit la classe AMap.DistrictLayer, qui peut être utilisée pour ajouter des couches de limites de district administratif. Le code spécifique est le suivant : 🎜🎜rrreee🎜Dans le code ci-dessus, nous créons d'abord un objet couche district administratif. Ensuite, définissez le style du calque, y compris la couleur de remplissage et la couleur de la bordure. Ensuite, ajoutez la couche à la carte. Enfin, appelez la méthode setDistrictByCityCode et transmettez le code de la ville correspondant pour définir la région administrative à afficher. Vous pouvez retrouver le code ville de la ville correspondante sur la plateforme ouverte Amap. 🎜
🎜Exemple de code complet🎜🎜rrreee🎜your-key et 110000 dans l'exemple de code ci-dessus doivent être remplacés respectivement par votre propre Amap Clé cartographique et code de ville de la zone administrative souhaitée. 🎜🎜Grâce aux étapes ci-dessus, nous pouvons utiliser JS et Amap pour afficher la fonction d'affichage des limites du district administratif de localisation. Vous pouvez trouver le code de ville correspondant et ajuster les paramètres de style de la couche en fonction de vos propres besoins pour obtenir un affichage cartographique plus personnalisé. 🎜

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!