鼠标工具绘制（电子围栏，矢量图形，矢量编辑）高德地图

最新推荐文章于 2024-04-29 08:52:23 发布

牛奶加钙片丶

最新推荐文章于 2024-04-29 08:52:23 发布

阅读量730

点赞数

分类专栏：前端小demo 文章标签： javascript

本文链接：https://blog.csdn.net/mrshangguoqiang/article/details/126306487

版权

仅前端

电子围栏根据高德地图API实现简单的前端效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
      type="text/css"
    />
    <style>
      html,
      body,
      #container {
   
        height: 100%;
      }
      .input-item {
   
        height: 2.2rem;
      }
      .btn {
   
        width: 6rem;
        margin: 0 1rem 0 2rem;
      }
      .input-text {
   
        width: 4rem;
        margin-right: 1rem;
      }

      #clearAlone {
   
        position: fixed;
        bottom: 6rem;
        background-color: white;
        border-width: 0;
        right: 1rem;
        box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
        display: flex;
        flex-direction: column;
        border-radius: 0.4rem;
      }

      #clearAlone .btn {
   
        margin: 1rem 1rem 0rem 1rem;
      }

      #clearAlone .btn:last-child {
   
        margin-bottom: 1rem;
      }
    </style>
    <title>鼠标工具绘制（电子围栏，矢量图形，矢量编辑）</title>
    <script src="https://webapi.amap.com/maps?v=2.0&key=替换key&plugin=AMap.MouseTool,AMap.PolygonEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <div class="info">
      操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制
    </div