JS と Amap を使用して場所の行政区域の境界を表示する方法

JSとAmapを使って位置行政区域境界表示機能を実現する方法

インターネットの発達により、地図サービスは人々の生活に徐々に欠かせないものになってきました。一部。 Web 開発では、地理的な位置情報を表示するためにマップ API を使用する必要があることがよくあります。この記事では、JSとAmapを使って位置行政区域境界表示機能を実装する方法と、具体的なコード例を紹介します。

1. 準備
   まず、AMAP オープン プラットフォーム (https://lbs.amap.com/) に開発者アカウントを登録し、アプリケーションを作成する必要があります。アプリを作成した後、JS コードで呼び出される一意のキーを取得できます。
2. Amap API ライブラリの紹介
   HTML の タグ内に、Amap JS API ライブラリを導入する必要があります。具体的なコードは次のとおりです。

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

your-key を、取得した Amap マップのキーに置き換えます。

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 には、行政区域境界レイヤーを追加するために使用できる 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 メソッドを呼び出し、対応する都市コードを渡して、表示する行政区域を設定します。対応する都市の都市コードは、Amap オープン プラットフォームで確認できます。

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 上記のサンプル コードでは、実際のキーに置き換える必要があります。独自の Amap キーと必要な行政区域の都市コード。

以上の手順により、JSとAmapを利用して所在地行政区境界表示機能を実現することができます。対応する都市コードを見つけて、ニーズに応じてレイヤーのスタイル パラメーターを調整して、よりパーソナライズされた地図表示を実現できます。

以上がJS と Amap を使用して場所の行政区域の境界を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。