高德API开发实践

最新推荐文章于 2024-07-29 15:46:22 发布

晓白夏

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量207

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/weixin_62887122/article/details/140689317

版权

1.申请key值

网页搜索高德开放平台，添加Web服务类型的key

2.引入

在html页面的头文件中添加如下代码：

//页面自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//调用key值
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=在高德开放平台申请的key值">
</script>

3.初始化地图

var map = new AMap.Map('mapContainer', {
    resizeEnable: true, // 是否监控地图容器大小变化
    zoom: 13, // 初始缩放级别
    center: [116.397664, 39.903007] // 初始中心点坐标，这里选择定位到天安门广场
  });

3.1获取高德地图坐标

1）打开网页端高德地图后搜索具体点位（这里以天安门广场为例）

2）右键点击地图上的点位，选择“这是哪儿”

3）选择更多——>分享

4）新建页面打开刚才获得的链接，即可在上方看到坐标点位值，如下图红框内所示。

4.在地图上标点，并添加跳转链接

当点击地图上的标记点时，即可新建空白页并跳转

<script>
var markersData = [
    {
      position: [a, b],
      url: '#', // 标记点1对应的URL
      title: '标记点1',
      labelContent: '这里是标记点1的文字描述'
    },
    {
      position: [a, b],
      url:'#',
      title: '标记点2',
      labelContent: '这里是标记点2的文字描述'
    },
  ];
  markersData.forEach(function(markerData) {
    var marker = new AMap.Marker({
      position: markerData.position,
      map: map,
      title: markerData.title,
      label: {
        content: markerData.labelContent,
        offset: new AMap.Pixel(0, -20), // 根据需要调整偏移量
        direction: 'right' // 文本方向
      }
    });

    // 如果需要，可以为标记点添加点击事件等
    marker.on('click', function() {
      // alert('你点击了' + markerData.title);
      window.open(markerData.url, '_blank');
    });
  });
</script>

5.这里将整个页面分为左3右1的比例，在右侧添加搜索框（不适用于地图），以及某个小区的x号楼的选择框，并为x号楼添加跳转链接。以下是合并了css与js代码的html页面代码以及实际效果图。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小区导航页面</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=key值"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      height: 100vh;
    }

    .map-container {
      flex: 3;
      position: relative;
      overflow: hidden;
    }

    .map-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #333;
      border: 1px solid #ccc;
    }

    .nav-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    /*搜索框*/
    .search-box {
    }

    .search-box input {
      width: 200px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .dropdown-wrapper {
      display: flex;
      align-items: center;
    }

    .dropdown-btn {
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="map-container" id="mapContainer">
    <div class="map-placeholder" >这里应为地图显示区域</div>
  </div>
  <div class="container">
    <div class="nav-container">
      <div class="search-box">
        <input type="text" id="search-input" placeholder="输入地点名称">
        <button onclick="searchLocation()">搜索</button>
      </div>

      <div class="dropdown-wrapper">
        <button class="dropdown-btn">选择...</button>
        <span>文博小区</span>
        <div class="dropdown-content" style="display: none;">
          <a href="https://charts.thingjs.com/kunpeng/preview/sandbox/787e2564bd7c46629f8b00e7d200fd72" target="_blank">文博小区一号楼</a>
          <a href="#">文博小区二号楼</a>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<script>
  var map = new AMap.Map('mapContainer', {
    resizeEnable: true, // 是否监控地图容器大小变化
    zoom: 13, // 初始缩放级别
    center: [130.284235, 47.340539] // 初始中心点坐标
  });
  map.on('complete', function() {
    // 在这里设置事件监听器
  });
  // 假设你有一个标记点的坐标

  var markersData = [
    {
      position: [130.27897, 47.347583],
      url: '#', // 标记点1对应的URL
      title: '标记点1',
      labelContent: '文博小区'
    },
    {
      position: [130.283713, 47.339225],
      url:'#',
      title: '标记点2',
      labelContent: '东解放路营业厅'
    },
  ];
  markersData.forEach(function(markerData) {
    var marker = new AMap.Marker({
      position: markerData.position,
      map: map,
      title: markerData.title,
      label: {
        content: markerData.labelContent,
        offset: new AMap.Pixel(0, -20), // 根据需要调整偏移量
        direction: 'right' // 文本方向
      }
    });

    // 如果需要，可以为标记点添加点击事件等
    marker.on('click', function() {
      // alert('你点击了' + markerData.title);
      window.open(markerData.url, '_blank');
    });
  });

  // 获取按钮和下拉菜单元素
  var dropdownBtn = document.querySelector('.dropdown-btn');
  var dropdownContent = document.querySelector('.dropdown-content');
  // 为按钮添加点击事件监听器
  dropdownBtn.addEventListener('click', function() {
    // 切换下拉菜单的显示状态
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
  // 可选：为整个页面添加点击事件监听器，以便点击下拉菜单外部时隐藏下拉菜单
  document.addEventListener('click', function(event) {
    // 检查点击事件是否不在下拉菜单或其子元素上
    if (!dropdownContent.contains(event.target) && event.target !== dropdownBtn) {
      dropdownContent.style.display = "none";
    }
  });
</script>
</body>
</html>

跳转页面为ThingJS森大屏页面，能够很好的显示数据信息，且该工具能够实时刷新信息。

晓白夏

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
高德API开发实践

5.这里将整个页面分为左3右1的比例，在右侧添加搜索框（不适用于地图），以及某个小区的x号楼的选择框，并为x号楼添加跳转链接。4）新建页面打开刚才获得的链接，即可在上方看到坐标点位值，如下图红框内所示。跳转页面为ThingJS森大屏页面，能够很好的显示数据信息，且该工具能够实时刷新信息。1）打开网页端高德地图后搜索具体点位（这里以天安门广场为例）2）右键点击地图上的点位，选择“这是哪儿”当点击地图上的标记点时，即可新建空白页并跳转。3）选择更多——>分享。4.在地图上标点，并添加跳转链接。
复制链接

扫一扫