Maison > Article > interface Web > Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction d'édition de rectangle de carte
Avec le développement de la technologie Internet, les cartes Web sont devenues un outil important pour l'affichage et l'interaction des données. Dans les cartes Web, l'une des fonctions courantes est la modification des rectangles de carte. Les utilisateurs peuvent sélectionner des zones d'intérêt en faisant glisser des rectangles sur la carte. Cet article explique comment utiliser JavaScript et Tencent Maps pour implémenter la fonction d'édition de rectangle de carte et fournit des exemples de code spécifiques.
1. Prérequis
Avant de commencer à écrire du code, nous devons préparer les conditions suivantes :
Créez un conteneur dans le fichier HTML pour afficher la carte. Ensuite, écrivez du code JavaScript, créez la carte et ajoutez une barre d'outils.
<!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>
Explication du code :
Créez d'abord un conteneur de carte pour afficher la carte sur la page ;<!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>
Explication du code :
Nous utilisons la fonctionqq.maps.event.addListener()
pour capturer l'événement de dessin de rectangle ; Passez l'objet rectangle terminé à l'écouteur d'événement ; Obtenez les coordonnées de la bordure du rectangle via l'objet rectangle ; qq.maps.event.addListener()
函数来捕获矩形绘制事件;四、绘制矩形
最后一个步骤是,在地图上绘制矩形。我们需要创建一个函数,将矩形的边框坐标作为参数传递进去。在该函数中,我们可以使用qq.maps.Polygon
4. Dessinez un rectangle
qq.maps.Polygon
pour créer un polygone et l'ajouter à la carte. <!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>
<!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>
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!