高德地图自定义InfoWindow教程与实战

于 2024-10-03 15:26:35 发布
阅读量414 收藏 12
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33582089/article/details/142698673
版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本教程详细指导如何使用高德地图API创建自定义的InfoWindow以增强地图应用的用户交互体验。从基础使用讲起，涵盖创建自定义模板、加载模板内容、关联地图和标记、动态更新内容以及交互和事件处理等多个步骤。读者通过实践可以深入理解自定义InfoWindow的实现细节，并在实际开发中应用。

1. 高德地图自定义InfoWindow介绍

在现代Web应用中，地图功能的实现变得越来越重要，其中高德地图（AMap）提供了一个强大的组件——InfoWindow，用于显示关于地图上特定位置的额外信息。InfoWindow是一个浮动窗口，能够提供交互式的文本或图片信息，并且可以通过自定义来适应各种不同的应用场景需求。

自定义InfoWindow对于提升用户体验至关重要，它允许开发者根据需求设计InfoWindow的内容和样式。从简单的文本标签到复杂的图像和交互式HTML元素，自定义能够带来更丰富的信息展示效果。在本章中，我们将探讨InfoWindow的基本概念，并为后续章节的内容打下坚实的基础，这些章节将详细介绍如何通过HTML、CSS和JavaScript来实现InfoWindow的个性化定制。 

// 示例代码：创建一个简单的InfoWindow
var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 11,
    center: [116.397428, 39.90923]  // 设置地图中心点
});

var content = '这是一个自定义的InfoWindow内容。';
var marker = new AMap.Marker({
    position: map.getCenter(),  // 设置标记位置
    map: map
});

map.openInfoWindow(marker, content); // 在标记位置打开InfoWindow

在上述代码中，我们创建了一个地图实例，并在地图中心位置添加了一个标记和InfoWindow。这是InfoWindow自定义之旅的起点，而接下来的章节将逐渐深入介绍如何让这个窗口变得更加个性化和动态化。

2. HTML和CSS自定义模板设计

在这一章节中，我们将深入了解如何设计高德地图自定义InfoWindow的HTML和CSS模板。这是构建信息窗口视觉外观的基础，通过精心设计的模板能够提供给用户丰富且直观的交互体验。

2.1 模板的HTML结构

2.1.1 HTML基础结构和元素

HTML（HyperText Markup Language）是构建任何网页内容的基石。要设计一个InfoWindow的自定义模板，首先需要了解HTML的基本结构和元素。HTML文档通常由以下几个基本部分组成：

  • <!DOCTYPE html> 声明文档类型。
  • <html> 标签，它是所有HTML页面的根元素。
  • <head> 部分，包含关于文档的元数据。
  • <body> 部分，包含所有可见的页面内容。

对于InfoWindow模板，我们会聚焦在 <body> 部分，特别是创建一个 <div> 容器来作为InfoWindow的主体： 

<div id="customInfoWindow" class="info-window-template">
    <!-- 自定义内容将放在这里 -->
</div>

2.1.2 必要的HTML标签和属性

接下来，要给这个 <div> 容器添加一些必要的标签和属性，以便更好地控制内容和样式： 

<div id="customInfoWindow" class="info-window-template">
    <img src="path/to/image.jpg" alt="Image description" class="info-window-image">
    <h2 class="info-window-title">标题</h2>
    <p class="info-window-description">描述信息。</p>
</div>

在这个例子中，我们添加了一个图片 <img> 标签来展示信息窗口的图标，使用 <h2> 来放置标题，并通过 <p> 标签添加了描述内容。这些都是构建InfoWindow内容的基础。

2.2 模板的CSS样式

2.2.1 常用CSS属性和选择器

现在，我们已经具备了一个InfoWindow的HTML基础框架，接下来使用CSS来定义模板的样式。在CSS中，常用的选择器包括标签选择器、类选择器和ID选择器。例如： 

#customInfoWindow {
    width: 300px; /* 设置宽度 */
    height: 150px; /* 设置高度 */
    background-color: #fff; /* 背景颜色 */
    /* 更多样式 */
}

.info-window-template {
    /* 使用通用类来定义样式 */
    position: relative;
    /* 其他样式 */
}

.info-window-image {
    float: left; /* 图片浮动左侧 */
    margin-right: 10px; /* 图片右边距 */
    /* 更多样式 */
}

.info-window-title {
    font-size: 1.2em; /* 标题字体大小 */
    /* 其他样式 */
}

.info-window-description {
    /* 描述信息样式 */
}

2.2.2 设计响应式和美观的样式

为了使模板在不同的设备和屏幕尺寸上都能良好显示，需要对CSS进行响应式设计。可以使用媒体查询（Media Queries）来实现： 

@media (max-width: 600px) {
    #customInfoWindow {
        width: 100%; /* 小屏幕下宽度为100% */
    }
}

通过设置媒体查询，我们可以定义特定条件下的样式规则，使模板在不同尺寸的设备上都具有良好的显示效果。

为了增加模板的美观性，可以使用边框、阴影、渐变等高级CSS3属性： 

#customInfoWindow {
    border: 1px solid #ddd; /* 边框样式 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 阴影效果 */
    background: linear-gradient(to bottom, #f8f8f8 0%, #e7e7e7 100%); /* 背景渐变 */
}

通过以上代码，InfoWindow模板将拥有更加专业和美观的外观。

通过这些HTML和CSS的技巧，您可以创建出适合自己项目的高德地图InfoWindow自定义模板。接下来的章节，我们将探讨如何在JavaScript中加载和解析这些模板，并将其与InfoWindow关联起来。

3. JavaScript中模板内容的加载方法

3.1 引入高德地图API

3.1.1 引入API的方式和时机

要在Web应用中利用高德地图的自定义InfoWindow功能，首先需要正确引入高德地图JavaScript API。通常有两种方式可以实现这一点：

  1. 直接通过CDN引入 ：可以通过在HTML文件的 <head> 标签内添加一个 <script> 标签来直接链接到高德地图API的CDN地址。 
<script src="***你的API密钥"></script>
  1. 通过npm或yarn安装 ：对于更复杂的Web应用，推荐通过包管理器安装高德地图JavaScript API。这样可以在项目的构建系统中管理版本和依赖。 
npm install @amap/amap-jsapi-loader

或 

yarn add @amap/amap-jsapi-loader

然后，在JavaScript代码中使用如下： 

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
  key: '你的API密钥',
  version: '2.0', // 高德地图API的版本号
  plugins: ['AMap.DistrictSearch'], // 可选插件
}).then((AMap) => {
  // 在这里编写使用AMap的代码
  console.log(AMap);
}).catch(e => console.error(e));

3.1.2 配置和使用API密钥

引入API后，需要配置API密钥（也称为Key或License Key），它是一个验证身份的凭证，用于访问高德地图提供的API服务。获取密钥后，应在引入API的标签中指定它，确保可以正常使用服务。 

<script src="***你的API密钥"></script>

在某些情况下，也可以在JavaScript代码中设置： 

AMapLoader.load({
  key: '你的API密钥',
  // 其他配置项...
});

密钥需要保密处理，不要在公共代码库或前端代码中直接暴露密钥信息。应通过后端服务器进行密钥管理，避免API密钥泄露风险。

3.2 加载和解析HTML模板

3.2.1 使用JavaScript解析模板

高德地图的自定义InfoWindow功能允许开发者通过HTML模板定义InfoWindow的内容。利用JavaScript，可以先定义模板内容，然后在加载地图的同时解析这些模板。

一个典型的InfoWindow HTML模板可能如下所示： 

<div id="infoWindowTemplate">
  <h1 id="title"></h1>
  <p id="content"></p>
</div>

通过JavaScript加载并解析HTML模板的方法如下： 

function loadTemplate() {
  // 创建一个新的template元素
  const template = document.createElement('template');
  // 设置模板内容
  template.innerHTML = `
    <div>
      <h1 id="title"></h1>
      <p id="content"></p>
    </div>
  `;
  // 将模板内容附加到body或指定的容器中
  document.body.appendChild(template.content);
}

loadTemplate();

通过 document.createElement('template') 创建一个模板元素，并通过 innerHTML 属性设置模板的HTML字符串。然后，可以将这个模板附加到DOM中以供后续使用。

3.2.2 动态插入模板内容

在InfoWindow中使用模板时，经常需要根据不同的标记动态更改模板内容。例如，根据用户的点击事件动态插入不同的标题和内容。 

// 假设infoWindow是一个***Window的实例
infoWindow.setContent(document.getElementById('infoWindowTemplate').content.cloneNode(true));

这段代码通过获取模板的克隆版本来更新InfoWindow的内容。 cloneNode(true) 方法会克隆模板的所有子节点，包括元素和文本。

3.3 绑定模板与InfoWindow

3.3.1 设置InfoWindow的模板内容

为了将模板内容应用到InfoWindow中，我们需要将模板HTML内容设置为InfoWindow的 content 属性。 

// 使用document.querySelector获取模板
const templateContent = document.querySelector('#infoWindowTemplate').content;
// 创建InfoWindow实例
const infoWindow = ***Window({
  content: templateContent.cloneNode(true),
  position: new AMap.LngLat(116.397428, 39.90923), // 设置InfoWindow位置
  offset: new AMap.Pixel(-100, -30) // 设置InfoWindow的偏移量
});

通过这种方式，我们创建了一个InfoWindow实例并使用了模板内容。此时，InfoWindow已经准备好展示自定义内容了。

3.3.2 InfoWindow的事件绑定

InfoWindow通过其事件系统可以响应用户的交互动作。最为关键的事件之一是 open 事件，当InfoWindow被打开时触发。 

infoWindow.on('open', function() {
  // 用户打开了InfoWindow，可以在这里添加一些自定义逻辑
  console.log('InfoWindow opened');
});

通过绑定 open 事件，我们可以为InfoWindow打开时添加自定义行为，比如实时获取并更新展示数据。

以上操作将让InfoWindow与HTML模板内容相结合，完成其自定义展示功能。接下来，我们需要探讨如何将InfoWindow与地图上的标记进行关联，以便于用户与之进行交互。

4. InfoWindow与地图和标记的关联

信息窗口（InfoWindow）作为地图应用中常见的交互元素，能够显示关于地图上标记或位置的额外信息。对于高德地图而言，自定义InfoWindow的能力允许开发者灵活地展示定制内容。本章节将重点介绍如何将InfoWindow与地图上的标记进行关联，以及如何实现它们之间的互动。

4.1 地图上添加自定义标记

在深入了解如何将InfoWindow与标记关联之前，首先需要掌握如何在地图上添加自定义标记。

4.1.1 创建标记的API介绍

高德地图的API允许开发者通过 AMap.Marker 对象在地图上添加标记。以下代码展示了如何创建一个基本的标记： 

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.397428, 39.90923), // 设置标记的位置
    map: map, // 绑定到一个已存在的地图实例
    icon: 'path/to/icon.png' // 设置标记的图标
});

4.1.2 标记的自定义选项设置

除了位置和图标，高德地图的标记对象还提供了许多其他选项，例如标题、提示信息、偏移量等。这些选项可以通过构造函数传递给 AMap.Marker ，也可以通过设置方法动态修改。以下展示了如何为标记设置标题和提示信息： 

marker.setTitle('My Marker Title'); // 设置标记的标题
marker.setLabel({
    content: '1', // 提示信息的内容
    position: 'bottom' // 提示信息的位置
});

4.2 InfoWindow与标记的绑定方法

成功创建标记之后，下一步是将InfoWindow绑定到标记，使得点击标记时可以展示自定义内容。

4.2.1 如何将InfoWindow绑定到标记

***Window 对象用于创建信息窗口，它可以接收一个HTML字符串作为内容。以下是将InfoWindow绑定到标记的示例代码： 

var infoWindow = ***Window({
    content: '<div id="iw_content">Hello InfoWindow!</div>', // HTML内容
    position: marker.getPosition() // 与标记相同的位置
});

marker.on('click', function() {
    infoWindow.open(map, marker); // 绑定点击事件
});

4.2.2 标记点击事件触发InfoWindow

在上述示例中，通过 marker.on('click', ...) 方法监听标记的点击事件，并在事件触发时打开InfoWindow。这样的绑定方式使InfoWindow可以随标记点击而展现。结合上一章节中介绍的模板内容加载方法，InfoWindow可以展示更加丰富的信息。

InfoWindow与标记的关联不仅限于简单的内容展示，还可以在InfoWindow中嵌入互动组件，如表单、图片轮播等，从而丰富用户的交互体验。接下来的章节将详细探讨如何动态更新InfoWindow的内容，以及如何为InfoWindow添加更多的交互和事件处理功能。

在上述章节中，我们已经学习了如何在高德地图上添加标记，并将InfoWindow与标记绑定。通过上述示例代码，我们可以理解到标记和InfoWindow的关联是通过监听标记的点击事件，并触发InfoWindow的打开事件来实现的。在下一章节中，我们将继续深入探讨如何利用JavaScript动态更新InfoWindow内容，以及在不同条件下如何处理InfoWindow的显示和隐藏。

5. 动态更新InfoWindow内容的技巧

动态更新信息窗口（InfoWindow）内容是提升地图交互体验的关键功能之一。它允许开发者在用户与地图进行交互时，向信息窗口中加载和显示实时数据。在本章节中，我们将探讨如何获取动态数据、处理这些数据，以及在何时以及如何更新信息窗口内容。

5.1 动态数据的获取和处理

为了提供丰富且实时的用户体验，信息窗口内容需要根据不同的触发条件显示不同的数据。以下是动态数据获取和处理的详细步骤。

5.1.1 从服务器获取数据

通常，动态内容的数据源是服务器端的数据接口。通过网络请求获取数据是数据动态更新的第一步。我们可以使用 fetch API或者 XMLHttpRequest (XHR) 来从服务器端获取数据。 

function fetchData() {
  fetch('***')
    .then(response => response.json())
    .then(data => {
      updateInfoWindowContent(data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

fetchData();

在上面的代码中，我们使用了 fetch 函数异步获取JSON格式的数据。如果数据获取成功， then 方法会调用 updateInfoWindowContent 函数，该函数负责更新信息窗口的内容。

5.1.2 数据的格式化和应用

获取到的数据需要进行适当的格式化才能在信息窗口中展示。数据格式化可能会涉及到数据类型转换、排序、过滤、字符串拼接等操作。 

function updateInfoWindowContent(data) {
  let content = `<div class="infowindow-content">`;
  data.forEach(item => {
    content += `<p><strong>地点：</strong>${item.location}</p>`;
    content += `<p><strong>描述：</strong>${item.description}</p>`;
    // ... 其他数据格式化
  });
  content += `</div>`;
  // ... 更新信息窗口
}

上述代码展示了如何根据从服务器获取的数据，格式化并拼接成HTML内容。这里使用了模板字符串来简化字符串的拼接过程。

5.2 动态内容更新的时机和方法

更新时机的决策依赖于用户的交互行为或是地图事件。例如，当用户点击一个标记点时，我们可能会希望立即更新信息窗口的内容。接下来，我们将介绍一些触发内容更新的条件以及相应的更新方法。

5.2.1 更新内容的触发条件

更新内容的触发条件可以根据实际应用场景来设置。常见的触发条件包括：

  • 标记点被点击
  • 地图视图变化
  • 时间间隔触发器（例如，定时更新数据）

5.2.2 使用JavaScript更新模板内容

一旦确定了触发条件，使用JavaScript来更新信息窗口的内容就变得简单。在高德地图中，InfoWindow对象提供了一个 setContent 方法，允许开发者更改信息窗口的内容。 

function updateInfoWindowContent(data) {
  const infowindow = ***Window({
    // ... 其他配置项
  });
  infowindow.setContent(`<div class="infowindow-content">...</div>`); // HTML内容
  infowindow.open(map, marker); // map为当前地图实例，marker为触发InfoWindow的标记
}

// ... 绑定到相应触发条件的事件处理函数

在上述代码中，我们首先创建了一个InfoWindow实例，并设置了内容，然后将其在地图上打开。这个函数可以在适当的时机被调用，例如在用户点击标记点的事件处理函数中。

实现示例

为了更清晰地理解这一过程，下面是一个完整的示例，展示了如何从服务器获取数据，并在用户点击地图标记点时更新信息窗口内容。 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态更新InfoWindow内容</title>
  <!-- 引入高德地图API -->
  <script src="***"></script>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <!-- 地图容器 -->
  <div id="container"></div>
  <script>
    // 地图实例
    var map = new AMap.Map('container', {
      // ... 地图配置项
    });

    // 点击标记点时触发的函数
    function onMarkerClick(marker, data) {
      updateInfoWindowContent(data);
      marker.setMap(map); // 将标记点重新放置到地图上
    }

    // 更新InfoWindow内容的函数
    function updateInfoWindowContent(data) {
      const infowindow = ***Window({
        // ... InfoWindow配置项
      });

      infowindow.setContent(
        `<div class="infowindow-content">
          <h3>${data.title}</h3>
          <p>${data.description}</p>
        </div>`
      );

      infowindow.open(map, marker); // 将InfoWindow打开在标记点位置
    }

    // 假设我们有标记点数组和数据处理逻辑
    var markers = [
      // ... 标记点数据
    ];
    // 事件绑定逻辑
    // ...

    // 从服务器获取数据并处理
    function fetchDataAndShowInfoWindow(marker) {
      // 假设每个标记点有唯一的标识符id
      fetch(`***${marker.id}`)
        .then(response => response.json())
        .then(data => {
          onMarkerClick(marker, data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }

    // 调用函数，当某个事件发生时（例如地图加载完成后）
    map.on('complete', () => {
      // 假设我们遍历标记点数组，并为每个标记点绑定点击事件
      markers.forEach(marker => {
        map.add(marker); // 将标记点添加到地图上
        marker.on('click', () => {
          fetchDataAndShowInfoWindow(marker); // 获取数据并更新InfoWindow
        });
      });
    });
  </script>
</body>
</html>

在上述HTML模板中，我们通过高德地图API初始化地图，并为每个标记点绑定了点击事件。当点击标记点时，触发数据的获取和InfoWindow内容的更新。需要注意的是，这个示例仅用于说明动态更新InfoWindow内容的过程，并不包含所有必要的代码和样式配置。

通过动态地更新信息窗口内容，开发者可以创建更加动态和互动的地图应用。下一章节我们将进一步探讨InfoWindow的交互和事件处理方法，进一步提高应用的交互性和用户体验。

6. InfoWindow交互和事件处理方法

6.1 InfoWindow的交互功能

InfoWindow作为地图上的一个交互元素，提供了丰富的用户交互方式，其中包括鼠标、触摸屏操作等，能够极大地提升用户体验。

6.1.1 鼠标交互事件

  • click ：鼠标点击InfoWindow时触发。
  • mouseover ：鼠标悬停时触发。
  • mouseout ：鼠标移出时触发。
  • mousemove ：鼠标移动时触发。 
// 鼠标事件示例代码
infoWindow.addListener('click', function() {
  // 点击InfoWindow时的操作
});

infoWindow.addListener('mouseover', function() {
  // 鼠标悬停时的操作
});

infoWindow.addListener('mouseout', function() {
  // 鼠标移出时的操作
});

infoWindow.addListener('mousemove', function() {
  // 鼠标移动时的操作
});

6.1.2 键盘和其他输入设备的交互

除了鼠标交互，InfoWindow也支持键盘操作和其他输入设备的交互。以下是一些事件的说明和示例代码：

  • keydown ：键盘按下时触发。
  • keyup ：键盘释放时触发。 
// 键盘事件示例代码
infoWindow.addListener('keydown', function(e) {
  // 键盘按下时的操作
});

infoWindow.addListener('keyup', function(e) {
  // 键盘释放时的操作
});

6.2 处理InfoWindow的事件

有效地监听和处理InfoWindow的事件能够帮助我们根据用户操作做出响应，提升应用的可用性和响应性。

6.2.1 事件监听和响应

在高德地图API中，我们可以为InfoWindow添加事件监听器来处理用户的交互事件。 

// 事件监听和响应示例代码
infoWindow.addListener('closeclick', function() {
  // InfoWindow关闭时的操作
});

infoWindow.addListener('content_changed', function() {
  // InfoWindow内容变化时的操作
});

6.2.2 事件处理的最佳实践

事件处理的最佳实践是尽量避免执行耗时操作，以保证应用的流畅性。同时，应当注意事件的取消，避免不必要的事件触发。 

// 事件处理最佳实践示例代码
infoWindow.addListener('click', function() {
  // 确保快速响应
  setTimeout(() => {
    // 延迟执行耗时操作
  }, 500);
});

表格：InfoWindow事件处理方法对照表

| 事件名称 | 触发时机 | 描述 | |----------------|--------------------------|------------------------------------------------------------| | closeclick | InfoWindow关闭时 | InfoWindow被用户关闭时触发 | | content_changed | InfoWindow内容发生变化时 | 在动态更新InfoWindow内容后触发 | | open | InfoWindow打开时 | InfoWindow首次显示时触发 | | close | InfoWindow关闭时 | InfoWindow关闭时触发 | | position_changed | InfoWindow位置发生变化时 | InfoWindow移动到新位置时触发 |

通过上述的表格，我们可以看到，InfoWindow提供了多种事件监听，可以根据实际的应用场景，选择合适的事件进行监听和处理。

InfoWindow的事件处理方法，不仅限于上述介绍，还包括了很多细节的事件，如 drag 、 dragend 等，这些都需要根据实际的开发需求进行深入的了解和应用。

在实际开发过程中，我们应合理利用InfoWindow提供的事件，通过精心设计的交互方式和响应处理，来提升应用的用户体验和交互流畅度。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本教程详细指导如何使用高德地图API创建自定义的InfoWindow以增强地图应用的用户交互体验。从基础使用讲起，涵盖创建自定义模板、加载模板内容、关联地图和标记、动态更新内容以及交互和事件处理等多个步骤。读者通过实践可以深入理解自定义InfoWindow的实现细节，并在实际开发中应用。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

朱昆 iamkun
关注
vue3 + 高德地图 实现多个标点和窗体，超详细，开箱即用
css_javascrpit的博客
09-11 2269
在高德API的使用中，有很多比较实用的技术，今天就整理一下高德地图实现标点与点击标点展示弹出框的写法。开箱即用
web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程
pixle的博客
08-18 6608
本文将讲述如何利用高德地图JS API实现地图标点、聚合点、自定义图标、点击窗体信息展示等基本功能实现，结合实际项目中遇到场景需求进行演示聚合点自定义样式通过设置renderClusterMarker字段配置渲染函数，并在渲染函数中通过dom操作生成样式节点插入聚合点父节点上//聚合点实例renderClusterMarker:renderClusterMarker,//自定义样式渲染});//渲染函数//自定义图标背景//聚合个数。
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
01-13 1945
在数据可视化大屏的开发中，牵涉到地图类开发（即WEB GIS）的，主要使用百度地图、高德地图和腾讯地图。对于国内地图类开发平台而言，百度和高德是做WEB GIS的不二选择，腾讯地图基本使用于小程序类的开发。最终呈现动图。在开发过程中，涟漪动画的实现，自定义富文本弹窗，是重点和难点，除了对高德地图样例的理解和调试外，更需要结合实际的UI界面进行实现。
Flutter插件开发之Android高德地图
qq_39694327的博客
05-24 2031
从零开发一个Android高德地图插件
高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
05-07 853
涟漪动画CSS样式 .alert1 { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #ff0000; margin: auto 5px; -webkit-animation: animation1 1s in.
高德开放平台使用
qq_35856778的博客
11-30 951
【代码】高德开放平台使用。（vue）
景点地图开发实战
weixin_30293135的博客
12-20 438
几个月前做过一个小程序，虽然没什么访问量，但是我觉得没有一个相对应的官网就不是一个完整的网站，于是拖拖拉拉了好几个月终于开始了官网的制作，由于pc端权限的事情，所以官网只能是展示一些基础信息，其中最复杂的便是景点地图。 大体效果： 关于景点地图，我选取了高德地图进行二次开发，虽然高德地图也可以通过搜索景点+城市来搜索完整的城市，但是毕竟自由度不高，自己想随机修改调整...
个人收藏gis开发webgis开发gis相关源码地图数据以及资料
不定时分享最优质的网络技术与教程，满满的干货。
09-01 1037
整理个人这几年来收藏的关于gis相关的资料汇总，总体分为四个部分：（1）gis源代码，arcgis api、openlayers、leaflet、cesium等；（2）地图数据，矢量数据以及三维模型数据等；（3）arcgis安装包；（4）gis相关文档资料。 适合对象：1.webgis&gis初学者2.觉的内容对自己学习有所帮助的giser详情具体说明如下：1.整体结构目录2.源代码目录，包括arcgis api 3以及4、cesium、leaflet、openlayers、python脚本工具源码。三峡库
runtrack3：JavaScript运动轨迹追踪系统实战
weixin_42186387的博客
09-18 2078
本文还有配套的精品资源，点击获取 简介：“runtrack3”是一个利用JavaScript实现的轨迹追踪项目，主要目标是记录、分析和展示运动路径。项目涵盖了前端开发、地理定位、地图API、数据可视化以及交互设计等多个关键技术和应用。本文将深入探讨JavaScript基础、Web API使用、前端框架、地图服务集成、数据结构与算法、数据可视化技术、事件监听与响应、异步编程、...
高德地图自定义infowindow
04-28
3. **关联地图和标记**：将`Infowindow`与地图和特定的标记关联起来。首先，创建一个`Marker`，然后在其点击事件中打开`InfoWindow`： ```javascript var marker = new AMap.Marker({ position: map.getCenter(),...
vue高德地图自定义InfoWindow
sinat_37984999的博客
07-15 1577
//设置信息窗体内容 let content = "<div>主体名称：" +lng.org_name +"</div><div>重量：" +lng.weight + "kg</div><div>时间：" + lng.create_time + "</div><div>质量：" +lng.quality + "</div>"; //设置自定义窗体控件 let button1 = .
Android 高德地图自定义InfoWindow
三颗猴面包树
11-04 1819
高德地图自定义InfoWindow官方API绘制信息窗体。自定义InfoWindow代码（最核心代码）。 Marker marker = aMap.addMarker(new MarkerOptions() .position(pointList.get(i)).snippet("dasda") .title("标题").vi
android高德地图自定义infoWindow、点击其它地方隐藏infoWindow、infoWindow点击事件
Demon_Witch的博客
11-29 7841
笔者自定义的infoWindow效果如图 图中的infoWindow背景用的是图片，自定义infoWindow用到的主要方法如下 @Override public View getInfoContents(Marker arg0) { return null; } /** * 监听自定义infowindow窗口的infowindow事件回调 */ public
PHP基于微信公众号的点餐系统源码.zip
10-03
用Yii2框架做的一个微信公众号点餐系统，商家接入管理后台之后就可以在后台添加菜式的类型和菜式的名称，客户在微信扫描二维码关注公众号就可以在公众号点餐，下单时提交餐桌号还有相应的信息到商家后台，商家在后台可以查看到订单信息 提示，因为个人原因缺乏支付功能，支付代码已经完成
基于Delaunay三角剖分的大学生方程式无人赛车路径规划算法
10-03
【作品名称】：基于Delaunay三角剖分的大学生方程式无人赛车路径规划算法 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 基于 Delaunay 三角剖分的路径规划算法：将锥桶位置视为离散点，构建 Delaunay 三角，然 - 第一列为锥桶序号，内外侧锥桶已经分别按照赛道顺序排序 - 第二列为锥桶类型（颜色），`2` 为外侧锥桶（蓝色，位于车辆行驶方向的左侧）、`11` 为内侧锥桶（黄色，位于车辆行驶方向的右侧） - 第三四列为 x 坐标与 y 坐标，单位为 [m] 在真实场景中，安装在赛车上的传感器的感知范围是有限的，并不能一次获取所有锥桶位置。因此，设计一个变量 `interval`，用于控制每次规划时考虑的锥桶数量。（换言之，将整条赛道划分为若干个路段，每次只在一个路段内进行规划。）如图所示，若 `i 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
MATLAB 实现的基于随机森林（Random Forest, RF）的工业增加值预测模型的详细实例（包含详细的完整的程序和数据
10-03
主要内容：本文介绍了一个完整的案例，展示用MATLAB的TreeBagger函数实现基于随机森林的方法来进行工业增加值的预测。该模型考虑了生产总值、投资以及消费等因素，通过详细的操作步骤生成了相关数据，训练与评估了随机森林模型。文中还提供了完整的源代码和示例，方便开发者动手实践和学习如何利用统计和机器学习工具箱进行预测任务。 适用人群：熟悉基本MATLAB语法，具有一定数据分析经验和统计学基础知识的研发和工程技术人员。 使用场景及目标：适合用于工业经济分析师或者研究学者们在需要快速预测行业增长趋势时借鉴，特别当涉及到多因素复杂变量情况下时。 补充说明：此案例还包括划分训练集与验证集，计算如均方误差（RMSE）等评估指数帮助检验模型准确度的功能部分，便于初学者快速搭建模型，理解每个阶段的工作细节及其重要性。
基于Python的新能源汽车应用场景，使用神经网络训练锂离子电池使用相关数据并预测电池的当前最大容量.zip
10-03
基于Python的新能源汽车应用场景，使用神经网络训练锂离子电池使用相关数据并预测电池的当前最大容量
神经网络图的组成-深度学习.zip
最新发布
10-03
神经网络图的组成-深度学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值