ホームページ > 記事 > ウェブフロントエンド > JavaScript と Tencent Maps を使用して地図四角形編集機能を実装する
インターネット技術の発展に伴い、Web マップはデータの表示と対話のための重要なツールになりました。 Web マップの一般的な機能の 1 つは、マップの四角形の編集です。ユーザーは、地図上で四角形をドラッグすることで関心のある地域を選択できます。この記事では、JavaScript と Tencent Maps を使用して地図四角形編集機能を実装する方法と、具体的なコード例を紹介します。
1. 前提条件
コードを書き始める前に、次の条件を準備する必要があります:
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>
コードの説明:
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 描画された四角形オブジェクトがイベント リスナーに渡されます; 最後のステップは、マップ上に長方形を描画することです。四角形の境界ボックスの座標をパラメータとして渡す関数を作成する必要があります。この関数では、
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 サイトの他の関連記事を参照してください。