腾讯地图画矩形 vue3写法

最新推荐文章于 2025-03-19 15:00:34 发布

原创

最新推荐文章于 2025-03-19 15:00:34 发布 · 391 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#swift #开发语言 #ios

图例：

使用画图工具必须要在api链接中加入参数：

html写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>绘制几何图形</title>
  </head>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #container {
      width: 100%;
      height: 80%;
    }

    #toolControl {
      position: absolute;
      top: 10px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 252px;
      z-index: 1001;
    }

    .toolItem {
      width: 30px;
      height: 30px;
      float: left;
      margin: 1px;
      padding: 4px;
      border-radius: 3px;
      background-size: 30px 30px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
      box-shadow: 0 1px 2px 0 #e4e7ef;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }

    .toolItem:hover {
      border-color: #789cff;
    }

    .active {
      border-color: #d5dff2;
      background-color: #d5dff2;
    }

    #marker {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
    }

    #polyline {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
    }

    #polygon {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');