Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction de dessin de rectangle de carte-js tutoriel-php.cn

Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction de dessin de rectangle de carte

Utilisez JavaScript et Tencent Maps pour implémenter la fonction de dessin de rectangles de carte

Tencent Maps est l'une des applications cartographiques les plus utilisées en Chine. Elle fournit une multitude d'API et d'outils pour aider les développeurs à implémenter diverses fonctions cartographiques couramment utilisées. . Dans cet article, nous expliquerons comment utiliser JavaScript et l'API Tencent Map pour implémenter une fonction simple de dessin de rectangle de carte.

Étape 1 : Introduire l'API Tencent Map

Tout d'abord, pour utiliser l'API Tencent Map, nous devons introduire le fichier JavaScript correspondant dans la page Web. Nous pouvons ajouter l'extrait de code suivant dans le fichier HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>地图矩形绘制</title>
    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
  </head>
  <body>
    <div id="map" style="width:100%; height:100%;"></div>
  </body>
</html>

Copier après la connexion

Nous devons remplacer https://map.qq.com/api/js par notre propre clé API. Pour plus d'informations sur la façon d'obtenir et de demander des clés API, veuillez vous référer au [Document officiel de l'API Tencent Map](https://lbs.qq.com/webApi/javascriptV2/guide-getkey.html). https://map.qq.com/api/js替换为我们自己的API密钥。关于API密钥的获取和申请方法，可以参考[腾讯地图API官方文档](https://lbs.qq.com/webApi/javascriptV2/guide-getkey.html)。

步骤二：创建地图对象

在引入腾讯地图API之后，我们需要在JavaScript代码中创建地图对象。我们可以通过如下代码来实现：

var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128),
    zoom: 13
});

Copier après la connexion

以上代码中创建了一个地图对象，并将其绑定到HTML页面中ID为“map”的元素上。初始地图的中心位置为北京市中心，缩放级别为13级。

步骤三：创建矩形

接下来，我们需要创建一个可以绘制矩形的工具。腾讯地图API提供了qq.maps.Rectangle类，可以用来绘制矩形。我们可以通过如下代码来创建一个矩形对象并添加到地图上：

var rectangle = new qq.maps.Rectangle({
    map: map,
    bounds: new qq.maps.LatLngBounds(
        new qq.maps.LatLng(39.922890, 116.394230),
        new qq.maps.LatLng(39.906240, 116.424124)
    ),
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35
});

Copier après la connexion

以上代码中创建了一个矩形对象，并通过bounds属性设置了矩形的经纬度边界，strokeWeight属性设置矩形边框的宽度，fillColor属性设置矩形区域的颜色，fillOpacity属性设置矩形区域的透明度。

步骤四：实现矩形的拖动和调整大小

创建矩形对象之后，我们需要实现交互性功能，包括矩形的拖动和调整大小。

var isDragging = false;
var isResizing = false;
var startX, startY;
var nw, sw, ne, se;

// 矩形拖拽事件
qq.maps.event.addListener(rectangle, "mousedown", function(e) {
    isDragging = true;
    startX = e.latLng.getLng();
    startY = e.latLng.getLat();
});

qq.maps.event.addListener(rectangle, "mousemove", function(e) {
    if (isDragging) {
        var dx = e.latLng.getLng() - startX;
        var dy = e.latLng.getLat() - startY;
        var bounds = rectangle.getBounds();
        var newBounds = new qq.maps.LatLngBounds(
            new qq.maps.LatLng(bounds.getSouthWest().getLat() + dy, bounds.getSouthWest().getLng() + dx),
            new qq.maps.LatLng(bounds.getNorthEast().getLat() + dy, bounds.getNorthEast().getLng() + dx)
        );
        rectangle.setBounds(newBounds);
        startX = e.latLng.getLng();
        startY = e.latLng.getLat();
    }
});

qq.maps.event.addListener(rectangle, "mouseup", function(e) {
    isDragging = false;
});

// 矩形大小调整事件
qq.maps.event.addListener(rectangle, "bounds_changed", function() {
    if (isResizing) {
        return;
    }
    nw = new qq.maps.Marker({
        icon: {
            path: "M -8,0 L -4,-12 L 8,-12 L 8,-16 L -16,-16 L -16,4 L -12,4 L -12,0 z",
            fillColor: "#FF0000",
            fillOpacity: 1,
            scale: 0.5,
            strokeColor: "#FFF",
            strokeWeight: 2
        },
        map: map,
        position: rectangle.getBounds().getNorthWest(),
        draggable: true,
        zIndex: 99999
    });
    sw = new qq.maps.Marker({
        icon: {
            path: "M -8,0 L -4,12 L 8,12 L 8,16 L -16,16 L -16,-4 L -12,-4 L -12,0 z",
            fillColor: "#FF0000",
            fillOpacity: 1,
            scale: 0.5,
            strokeColor: "#FFF",
            strokeWeight: 2
        },
        map: map,
        position: rectangle.getBounds().getSouthWest(),
        draggable: true,
        zIndex: 99999
    });
    ne = new qq.maps.Marker({
        icon: {
            path: "M -8,0 L -4,-12 L 8,-12 L 8,4 L -12,4 L -12,8 L -8,8 L -8,0 z",
            fillColor: "#FF0000",
            fillOpacity: 1,
            scale: 0.5,
            strokeColor: "#FFF",
            strokeWeight: 2
        },
        map: map,
        position: rectangle.getBounds().getNorthEast(),
        draggable: true,
        zIndex: 99999 
    });
    se = new qq.maps.Marker({
        icon: {
            path: "M -8,0 L -4,12 L 8,12 L 8,-4 L -12,-4 L -12,-8 L -8,-8 L -8,0 z",
            fillColor: "#FF0000",
            fillOpacity: 1,
            scale: 0.5,
            strokeColor: "#FFF",
            strokeWeight: 2
        },
        map: map,
        position: rectangle.getBounds().getSouthEast(),
        draggable: true,
        zIndex: 99999
    });

    // 区域大小调整事件
    qq.maps.event.addListener(nw, "drag", function() {
        isResizing = true;
        var bounds = rectangle.getBounds();
        var newBounds = new qq.maps.LatLngBounds(
            new qq.maps.LatLng(nw.getPosition().getLat(), nw.getPosition().getLng()),
            new qq.maps.LatLng(bounds.getSouthEast().getLat(), bounds.getSouthEast().getLng())
        );
        rectangle.setBounds(newBounds);
        isResizing = false;
    });
    
    qq.maps.event.addListener(sw, "drag", function() {
        isResizing = true;
        var bounds = rectangle.getBounds();
        var newBounds = new qq.maps.LatLngBounds(
            new qq.maps.LatLng(bounds.getNorthWest().getLat(), sw.getPosition().getLng()),
            new qq.maps.LatLng(sw.getPosition().getLat(), bounds.getNorthEast().getLng())
        );
        rectangle.setBounds(newBounds);
        isResizing = false;
    });
    
    qq.maps.event.addListener(ne, "drag", function() {
        isResizing = true;
        var bounds = rectangle.getBounds();
        var newBounds = new qq.maps.LatLngBounds(
            new qq.maps.LatLng(ne.getPosition().getLat(), bounds.getSouthWest().getLng()),
            new qq.maps.LatLng(bounds.getSouthEast().getLat(), ne.getPosition().getLng())
        );
        rectangle.setBounds(newBounds);
        isResizing = false;
    });
    
    qq.maps.event.addListener(se, "drag", function() {
        isResizing = true;
        var bounds = rectangle.getBounds();
        var newBounds = new qq.maps.LatLngBounds(
            new qq.maps.LatLng(bounds.getNorthWest().getLat(), bounds.getNorthWest().getLng()),
            new qq.maps.LatLng(se.getPosition().getLat(), se.getPosition().getLng())
        );
        rectangle.setBounds(newBounds);
        isResizing = false;
    });
});

Copier après la connexion

以上代码中，我们实现了拖动矩形和调整矩形大小的功能。使用标记对象创建了四个箭头，用户可以通过拖动这些箭头来调整矩形的大小。拖动箭头时，我们先创建一个新的qq.maps.LatLngBounds

Étape 2 : Créer un objet cartographique

Après avoir introduit l'API Tencent Map, nous devons créer un objet cartographique dans le code JavaScript. Nous pouvons y parvenir grâce au code suivant :

rrreee

Le code ci-dessus crée un objet map et le lie à l'élément avec l'ID "map" dans la page HTML. Le centre de la carte initiale est le centre de Pékin et le niveau de zoom est le niveau 13. 🎜🎜Étape 3 : Créer un rectangle🎜🎜Ensuite, nous devons créer un outil capable de dessiner un rectangle. L'API Tencent Maps fournit la classe qq.maps.Rectangle, qui peut être utilisée pour dessiner des rectangles. Nous pouvons créer un objet rectangulaire et l'ajouter à la carte via le code suivant : 🎜rrreee🎜Le code ci-dessus crée un objet rectangulaire et définit les limites de latitude et de longitude du rectangle via l'attribut bounds, StrokeWeight La propriété définit la largeur de la bordure rectangulaire, la propriété fillColor définit la couleur de la zone rectangulaire et la propriété fillOpacity définit la transparence de la zone rectangulaire. 🎜🎜Étape 4 : Implémenter le glisser et le redimensionnement du rectangle🎜🎜Après avoir créé l'objet rectangulaire, nous devons implémenter des fonctions interactives, notamment le glisser et le redimensionnement du rectangle. 🎜rrreee🎜Dans le code ci-dessus, nous implémentons les fonctions de glisser et de redimensionner le rectangle. Quatre flèches sont créées à l'aide de l'objet marqueur, et l'utilisateur peut redimensionner le rectangle en faisant glisser ces flèches. Lorsque vous faites glisser la flèche, nous créons d'abord un nouvel objet qq.maps.LatLngBounds, puis modifions les limites de latitude et de longitude du rectangle en fonction de la position de la flèche déplacée. 🎜🎜Conclusion🎜🎜Grâce à cet article, nous avons appris comment introduire l'API Tencent Map dans les pages HTML, créer des objets cartographiques et des objets rectangle, et implémenter la fonction interactive des rectangles. Ce petit exemple montre une partie de l'utilisation de l'API Tencent Map et fournit également quelques compétences de base en programmation JavaScript. Le code complet peut être consulté [ici](https://codepen.io/halfoceans/pen/LYejvmG). 🎜

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!