ホームページ > 記事 > ウェブフロントエンド > JavaScript と Tencent Maps を使用して地図四角形編集機能を実装する

JavaScript と Tencent Maps を使用して地図四角形編集機能を実装する

WBOYオリジナル: 2023-11-21 15:03:48857ブラウズ

インターネット技術の発展に伴い、Web マップはデータの表示と対話のための重要なツールになりました。 Web マップの一般的な機能の 1 つは、マップの四角形の編集です。ユーザーは、地図上で四角形をドラッグすることで関心のある地域を選択できます。この記事では、JavaScript と Tencent Maps を使用して地図四角形編集機能を実装する方法と、具体的なコード例を紹介します。

1. 前提条件

コードを書き始める前に、次の条件を準備する必要があります:

有効な Tencent Maps 開発者アカウント;
Tencent Maps JavaScript API の紹介;
エディター (Visual Studio Code など) のインストールと構成。

2. マップの作成とツールバーの追加

HTML ファイル内にマップを表示するコンテナを作成します。次に、JavaScript コードを記述し、マップを作成し、ツールバーを追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图矩形编辑示例</title>
    <style type="text/css">
        #map-container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>
    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE"></script>
    <script type="text/javascript">
        var map = new qq.maps.Map(document.getElementById('map-container'), {
            center: new qq.maps.LatLng(39.916527, 116.397128),
            zoom: 10
        });

        //添加矩形工具栏
        var toolBar = new qq.maps.DrawingTools({
            map: map,
            drawingMode: qq.maps.DrawingTool.RECTANGLE,
            rectangleOptions: {
                fillColor: qq.maps.Color.fromHex('#FF6600', 0.4),
                strokeColor: qq.maps.Color.fromHex('#FF6600'),
                strokeWidth: 2
            }
        });
    </script>
</body>
</html>

コードの説明:

まず、ページ上に地図をレンダリングするためのマップコンテナを作成します;
Tencent Maps の JavaScript API を紹介します;
マップインスタンスを作成し、マップの中心点とズームレベルを設定します。
ツールバーを作成し、描画モードを長方形として指定し、長方形のスタイルを設定します。

3. 長方形描画イベントをキャプチャする

これで、長方形のツールバーが正常に追加されました。ただし、行う必要があるのは、ユーザーが四角形を描画したときにイベントをキャプチャし、その四角形の境界座標をコンソールに出力することです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图矩形编辑示例</title>
    <style type="text/css">
        #map-container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>
    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE"></script>
    <script type="text/javascript">
        var map = new qq.maps.Map(document.getElementById('map-container'), {
            center: new qq.maps.LatLng(39.916527, 116.397128),
            zoom: 10
        });

        //添加矩形工具栏
        var toolBar = new qq.maps.DrawingTools({
            map: map,
            drawingMode: qq.maps.DrawingTool.RECTANGLE,
            rectangleOptions: {
                fillColor: qq.maps.Color.fromHex('#FF6600', 0.4),
                strokeColor: qq.maps.Color.fromHex('#FF6600'),
                strokeWidth: 2
            }
        });

        //捕获矩形绘制事件
        qq.maps.event.addListener(toolBar, 'rectanglecomplete', function(event) {
            var bounds = event.getBounds();
            console.log('矩形边框左上角坐标：' + bounds.getNorthEast().toString() + '
矩形边框右下角坐标：' + bounds.getSouthWest().toString());
        });
    </script>
</body>
</html>

コードの説明:

qq.maps.event.addListener() 関数を使用して、四角形描画イベントをキャプチャします。 # will 描画された四角形オブジェクトがイベントリスナーに渡されます;
四角形オブジェクトを通じて四角形の境界座標を取得します;
境界座標をコンソールに出力します。
4. 長方形を描画する

最後のステップは、マップ上に長方形を描画することです。四角形の境界ボックスの座標をパラメータとして渡す関数を作成する必要があります。この関数では、

qq.maps.Polygon

クラスを使用して多角形を作成し、それをマップに追加できます。 <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图矩形编辑示例</title> <style type="text/css"> #map-container { width: 100%; height: 600px; } </style> </head> <body> <div id="map-container"></div> <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE"></script> <script type="text/javascript"> var map = new qq.maps.Map(document.getElementById('map-container'), { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 10 }); var polygons = []; //添加矩形工具栏 var toolBar = new qq.maps.DrawingTools({ map: map, drawingMode: qq.maps.DrawingTool.RECTANGLE, rectangleOptions: { fillColor: qq.maps.Color.fromHex('#FF6600', 0.4), strokeColor: qq.maps.Color.fromHex('#FF6600'), strokeWidth: 2 } }); //捕获矩形绘制事件 qq.maps.event.addListener(toolBar, 'rectanglecomplete', function(event) { var bounds = event.getBounds(); //绘制矩形 var polygon = new qq.maps.Polygon({ map: map, path: [ new qq.maps.LatLng(bounds.getNorthEast().getLat(), bounds.getSouthWest().getLng()), new qq.maps.LatLng(bounds.getNorthEast().getLat(), bounds.getNorthEast().getLng()), new qq.maps.LatLng(bounds.getSouthWest().getLat(), bounds.getNorthEast().getLng()), new qq.maps.LatLng(bounds.getSouthWest().getLat(), bounds.getSouthWest().getLng()) ], fillColor: qq.maps.Color.fromHex('#FF6600', 0.4), strokeColor: qq.maps.Color.fromHex('#FF6600'), strokeWidth: 2 }); polygons.push(polygon); }); </script> </body> </html></pre> コードの説明:

マップ上に複数のポリゴンを作成するため、これらのポリゴンオブジェクトを格納する配列が必要です;

長方形描画イベントをキャプチャします。コールバック関数では、ポリゴンクラスを使用してポリゴンオブジェクトを作成します。
長方形の境界座標を使用してポリゴンオブジェクトを作成し、マップに追加して、ポリゴン配列に格納します。
これまでのところ、マップの四角形編集機能を実装することに成功しました。ユーザーは、地図上の四角形をドラッグして関心のあるエリアを選択し、地図上に四角形を描画できます。特定のコード例については、以下の完全な例を参照してください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图矩形编辑示例</title>
    <style type="text/css">
        #map-container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>

    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE"></script>
    <script type="text/javascript">
        var map = new qq.maps.Map(document.getElementById('map-container'), {
            center: new qq.maps.LatLng(39.916527, 116.397128),
            zoom: 10
        });

        var polygons = [];

        //添加矩形工具栏
        var toolBar = new qq.maps.DrawingTools({
            map: map,
            drawingMode: qq.maps.DrawingTool.RECTANGLE,
            rectangleOptions: {
                fillColor: qq.maps.Color.fromHex('#FF6600', 0.4),
                strokeColor: qq.maps.Color.fromHex('#FF6600'),
                strokeWidth: 2
            }
        });

        //捕获矩形绘制事件
        qq.maps.event.addListener(toolBar, 'rectanglecomplete', function(event) {
            var bounds = event.getBounds();

            //绘制矩形
            var polygon = new qq.maps.Polygon({
                map: map,
                path: [
                    new qq.maps.LatLng(bounds.getNorthEast().getLat(), bounds.getSouthWest().getLng()),
                    new qq.maps.LatLng(bounds.getNorthEast().getLat(), bounds.getNorthEast().getLng()),
                    new qq.maps.LatLng(bounds.getSouthWest().getLat(), bounds.getNorthEast().getLng()),
                    new qq.maps.LatLng(bounds.getSouthWest().getLat(), bounds.getSouthWest().getLng())
                ],
                fillColor: qq.maps.Color.fromHex('#FF6600', 0.4),
                strokeColor: qq.maps.Color.fromHex('#FF6600'),
                strokeWidth: 2
            });

            polygons.push(polygon);
        });
    </script>
</body>
</html>

以上がJavaScript と Tencent Maps を使用して地図四角形編集機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html 回调函数 Event 对象事件 visual studio visual studio code

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS と Baidu Maps を使用してマップポイント集約機能を実装する方法次の記事：JS と Baidu Maps を使用してマップポイント集約機能を実装する方法

続きを見る