Heim > Artikel > Web-Frontend > Verwendung von JavaScript und Tencent Maps zur Implementierung der Funktion zur Bearbeitung von Kartenrechtecken

Verwendung von JavaScript und Tencent Maps zur Implementierung der Funktion zur Bearbeitung von Kartenrechtecken

WBOYOriginal: 2023-11-21 15:03:48852Durchsuche

Mit der Entwicklung der Internettechnologie sind Webkarten zu einem wichtigen Werkzeug für die Datenanzeige und Interaktion geworden. Eine der häufigsten Funktionen in Webkarten ist die Bearbeitung von Kartenrechtecken. Benutzer können interessante Bereiche auswählen, indem sie Rechtecke auf der Karte ziehen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und Tencent Maps die Bearbeitungsfunktion für Kartenrechtecke implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Voraussetzungen

Bevor wir mit dem Schreiben von Code beginnen, müssen wir die folgenden Bedingungen vorbereiten:

Ein gültiges Tencent Maps-Entwicklerkonto;
Editor (z. B. Visual Studio Code) Installation und Konfiguration.
2. Erstellen Sie eine Karte und fügen Sie eine Symbolleiste hinzu.

Erstellen Sie einen Container in der HTML-Datei, um die Karte anzuzeigen. Schreiben Sie dann etwas JavaScript-Code, erstellen Sie die Karte und fügen Sie eine Symbolleiste hinzu.

<!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>

Code-Erklärung:

Erstellen Sie zunächst einen Kartencontainer, um die Karte auf der Seite darzustellen.

Erstellen Sie eine Karteninstanz und legen Sie den Kartenmittelpunkt und die Zoomstufe fest Erstellen Sie eine Symbolleiste, geben Sie den Zeichenmodus „Rechteck“ an und legen Sie den Stil des Rechtecks fest.
3. Erfassen Sie das Rechteck-Zeichnungsereignis
Jetzt haben wir erfolgreich eine Rechteck-Symbolleiste hinzugefügt. Was wir jedoch tun müssen, ist das Ereignis zu erfassen, wenn der Benutzer ein Rechteck zeichnet, und die Randkoordinaten des Rechtecks auf der Konsole auszugeben.

<!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>

Wir verwenden die Funktion qq.maps.event.addListener(), um das Rechteck-Zeichnungsereignis zu erfassen;

Übergeben Sie das fertige Rechteckobjekt an den Ereignis-Listener; Rufen Sie die Randkoordinaten des Rechtecks über das Rechteckobjekt ab.

Geben Sie die Randkoordinaten an die Konsole aus.

qq.maps.event.addListener()函数来捕获矩形绘制事件；
将绘制完成的矩形对象传递给事件监听器；
通过矩形对象获取矩形的边框坐标；
将边框坐标输出到控制台上。

四、绘制矩形

最后一个步骤是，在地图上绘制矩形。我们需要创建一个函数，将矩形的边框坐标作为参数传递进去。在该函数中，我们可以使用qq.maps.Polygon4. Zeichnen Sie ein Rechteck

Der letzte Schritt besteht darin, ein Rechteck auf der Karte zu zeichnen. Wir müssen eine Funktion erstellen, die die Begrenzungsrahmenkoordinaten des Rechtecks als Parameter übergibt. In dieser Funktion können wir die Klasse qq.maps.Polygon verwenden, um ein Polygon zu erstellen und es der Karte hinzuzufügen.

<!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>

Wir erstellen mehrere Polygone auf der Karte, daher benötigen wir ein Array zum Speichern dieser Polygonobjekte.
In der Rückruffunktion, die das Rechteck-Zeichnungsereignis erfasst, verwenden wir die Polygonklasse, um ein Polygon zu erstellen Objekt;

Wir erstellen ein Polygonobjekt unter Verwendung der Begrenzungskoordinaten des Rechtecks, fügen es der Karte hinzu und speichern es in einem Polygonarray.

🎜Bisher haben wir die Funktion zum Bearbeiten von Kartenrechtecken erfolgreich implementiert. Benutzer können den Interessenbereich auswählen, indem sie das Rechteck auf der Karte ziehen und das Rechteck auf der Karte zeichnen. Spezifische Codebeispiele finden Sie im vollständigen Beispiel unten: 🎜

<!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>

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript und Tencent Maps zur Implementierung der Funktion zur Bearbeitung von Kartenrechtecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie JS und Baidu Maps, um die Funktion zur Kartenpunktaggregation zu implementierenNächster Artikel：So verwenden Sie JS und Baidu Maps, um die Funktion zur Kartenpunktaggregation zu implementieren

In Verbindung stehende Artikel

Mehr sehen