JS と Amap を使用して場所の行政区域の境界を表示する方法-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-11-21 08:44:14

オリジナル

1635 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

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

マップコンテナの作成
HTML では、マップのコンテナを作成する必要があります。 div タグを使用して、一意の ID を割り当て、対応するスタイルを設定できます。具体的なコードは次のとおりです。

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

ログイン後にコピー

マップオブジェクトの初期化
JS コードでは、マップオブジェクトを初期化する必要があります。具体的なコードは次のとおりです。

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

ログイン後にコピー

上記のコードでは、地図のズームレベルを 11 に設定し、地図表示の中心点を [116.397428, 39.90923] に設定します。は北京市の座標です。

行政区域境界レイヤーの追加
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 オープンプラットフォームで確認できます。

完全なサンプルコード




    地点行政区边界展示
    
    <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 サイトの他の関連記事を参照してください。