layui结合高德地图api js实现地图显示覆盖图层

最新推荐文章于 2024-06-07 15:43:29 发布

mark10！

最新推荐文章于 2024-06-07 15:43:29 发布

阅读量687

点赞数 13

文章标签： javascript layui 前端

本文链接：https://blog.csdn.net/m0_48144113/article/details/135133971

版权

本文介绍如何在HTML中使用高德地图API，实现用户选择左下角和右上角两点，计算并显示中心点的过程。

摘要由CSDN通过智能技术生成

首先，确保你在HTML文件中引入了高德地图的API：

高德地图api链接：概述-地图 JS API 1.4 | 高德地图API

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>选择坐标点</title>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY"></script>
</head>
<body>
  <div id="map"></div>
  <script src="your_script.js"></script>
</body>
</html>

点击选择两个点，需要选择左下角和右上角两点，通过计算获取中心点。

// 在地图上选择左下角点和右上角点，并计算中心点

// 初始化地图
var map = new AMap.Map('map', {
  resizeEnable: true,
  center: [116.397428, 39.90923],
  zoom: 13
});

// 存储选取的点的数组
var points = [];

// 监听地图点击事件
map.on('click', function(e) {
  // 获取点击的经纬度
  var lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];

  // 如果数组中已有两个点，则清空数组重新开始
  if (points.length === 2) {
    points = [];
    map.clearMap(); // 清空地图上的标记
  }

  // 将点添加到数组中
  points.push(lnglat);

  // 在地图上显示选取的点
  var marker = new AMap.Marker({
    position: lnglat,
    map: map
  });

  // 提示用户选择下一个点
  if (points.length === 1) {
    alert('请选择右下角点');
  } else {
    // 计算两点中心点
    var centerLng = (points[0][0] + points[1][0]) / 2;
    var centerLat = (points[0][1] + points[1][1]) / 2;

    // 存储中心点
    var centerPoint = [centerLng, centerLat];
    
    // 在地图上显示中心点
    var centerMarker = new AMap.Marker({
      position: centerPoint,
      map: map,
      icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
    });
    // 添加图片图层
    var imageUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'; // 替换为你自己的图片 URL
    var imageLayer = new AMap.ImageLayer({
      url: imageUrl,
      bounds: new AMap.Bounds(points[0], points[1]),
      opacity: 1
    });
    map.add(imageLayer);
    // 更新地图的中心点坐标
    map.setCenter([newCenterLng, newCenterLat]);
    alert('中心点坐标：' + centerPoint);
  }
});

请注意，替换代码中的YOUR_AMAP_API_KEY为你的高德地图API密钥。这个示例中使用了地图点击事件来获取用户点击的坐标点，并通过提示用户选择左上角和右下角点，最终计算中心点并在地图上显示。