利用高德API进行交通情况的展示

已于 2025-01-13 10:24:44 修改
阅读量882 收藏 11
点赞数 24
文章标签： 信息可视化 高德API html javascript
于 2025-01-11 11:27:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66547608/article/details/145074417
版权

基于高德地图 JavaScript API v2.0 创建的网页，功能是展示地图并实现实时路况图层的显示与隐藏切换

1. HTML 部分

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>实时路况图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button class="btn" id="btn">显示/隐藏实时路况</button>
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2"></script>
<script src="script.js"></script>
</body>
</html>

  • 元数据和标题：
    • meta charset="utf-8" 设置字符编码为 UTF - 8。
    • meta http-equiv="X-UA-Compatible" content="IE=edge" 确保网页在 IE 浏览器中以最高版本渲染。
    • meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" 设置视口，初始缩放比例为 1.0，禁止用户缩放，宽度等于设备宽度。
    • <title>实时路况图层</title> 设置网页标题。
  • 样式引入和自定义样式：
    • 引入了高德地图官方示例中心的 CSS 样式表 https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css。
    • 自定义样式设置 html、body 和 #container 的宽度和高度为 100%，并清除内外边距，确保地图能铺满整个页面。
  • 页面结构：
    • <div id="container"></div> 是地图容器，地图将渲染在此处。
    • <div class="input-card"> 及其内部的 <button> 创建了一个按钮，用于切换实时路况图层的显示与隐藏。按钮的 ID 为 btn，类名为 btn，文本为 “显示 / 隐藏实时路况”。
  • 脚本引入：
    • 引入高德地图 JavaScript API v2.0，key 是用于访问 API 的密钥。
    • 引入自定义的 JavaScript 脚本 script.js（假设该脚本包含地图初始化和交互逻辑，在原代码中这部分逻辑直接写在 HTML 中，这里分开只是为了更好的结构说明）。

2. JavaScript 部分（原代码中直接在 HTML 中，这里提取出来分析）

var map = new AMap.Map('container', {
    center: [114.091058,32.148624],
    zoom: 13
});
map.setMapStyle('amap://styles/blue');
//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
    zIndex: 10,
    zooms: [7, 22],
});

trafficLayer.setMap(map);

var isVisible = true;
function toggle() {
    if (isVisible) {
        trafficLayer.hide();
        isVisible = false;
    } else {
        trafficLayer.show();
        isVisible = true;
    }
}

document.getElementById('btn').addEventListener('click', toggle);
  • 地图初始化：
    • 使用 new AMap.Map('container', {...}) 创建一个地图实例，将其渲染在 ID 为 container 的 DOM 元素上。
    • center 属性设置地图的中心坐标为 [114.091058, 32.148624]。
    • zoom 属性设置地图的初始缩放级别为 13。
    • map.setMapStyle('amap://styles/blue') 设置地图的样式为蓝色风格。
  • 实时路况图层创建：
    • var trafficLayer = new AMap.TileLayer.Traffic({...}) 创建一个实时路况图层实例。
    • zIndex 属性设置图层的堆叠顺序为 10。
    • zooms 属性设置该图层在地图缩放级别 7 到 22 之间可见。
    • trafficLayer.setMap(map) 将实时路况图层添加到地图上。
  • 显示与隐藏切换逻辑：
    • 定义变量 isVisible 用于记录实时路况图层的当前可见状态，初始为 true。
    • toggle 函数实现了切换实时路况图层显示与隐藏的逻辑。如果 isVisible 为 true，则调用 trafficLayer.hide() 隐藏图层，并将 isVisible 设置为 false；否则，调用 trafficLayer.show() 显示图层，并将 isVisible 设置为 true。
    • 通过 document.getElementById('btn').addEventListener('click', toggle) 为按钮添加点击事件监听器，当按钮被点击时，调用 toggle 函数。

3.可能的改进点

  • 错误处理：在加载高德地图 API 和使用 API 密钥时，应添加错误处理机制，以处理可能的加载失败或密钥无效等问题。
  • 样式优化：可以进一步优化按钮的样式，使其在不同屏幕尺寸下有更好的显示效果。
  • 代码结构：将 JavaScript 代码分离到单独的文件中，以提高代码的可维护性和复用性，就像上述分析中提到的将 HTML 中的 JavaScript 部分提取到 script.js 文件。

完整代码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>实时路况图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button class="btn" id="btn">显示/隐藏实时路况</button>
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2"></script>
<script>
    var map = new AMap.Map('container', {
        center: [114.091058,32.148624],
        zoom: 13
    });
    map.setMapStyle('amap://styles/blue');
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22],
    });

    trafficLayer.setMap(map);

    var isVisible = true;
    function toggle() {
        if (isVisible) {
            trafficLayer.hide();
            isVisible = false;
        } else {
            trafficLayer.show();
            isVisible = true;
        }
    }
  	
  	document.getElementById('btn').addEventListener('click', toggle);
</script>
</body>
</html>

截图：

4.3D可视化交通展示

1. HTML 结构

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>3D地图</title>
    <style>
        body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
       .container{
            height: 100%
        }
    </style>
    <script language="javascript" src="//webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2&plugin=AMap.ControlBar,AMap.ToolBar"></script>
</head>
<body >
    <div id="container" style="width:100%; height:100%;resize:both;"></div>
    <script language="javascript">
        // 代码主体
    </script>
</body>
</html>
  • 文档类型声明：<!DOCTYPE HTML> 声明文档类型为 HTML5。
  • 元数据：
    • meta name="viewport" 设置了页面的视口，确保页面在移动设备上正确显示，禁止用户缩放。
    • meta http-equiv="Content-Type" 设置页面的字符编码为 UTF - 8。
  • 标题：<title>3D地图</title> 设置页面标题为 “3D 地图”。
  • 样式：设置了html和body元素的默认样式，使其占据整个视口，并为.container类设置了高度为 100%。
  • 脚本引入：通过<script>标签引入高德地图 Web API，指定版本为 2.0，并提供了 API 密钥1e31659e58fa7666fe0d08f4487ec5c2，同时加载了ControlBar和ToolBar插件。
  • 地图容器：在<body>中创建了一个div元素，id为container，用于承载地图，设置其宽度和高度为 100%，并允许用户调整大小。

2. JavaScript 代码

var map;
function mapInit(){
    map = new AMap.Map('container', {
        rotateEnable:true,
        pitchEnable:true,
        zoom: 17,
        pitch: 50,
        rotation: -15,
        viewMode:'3D', //开启3D视图,默认为关闭
        zooms:[2,20],
        center:[114.081428,32.130259]
    });

    var controlBar = new AMap.ControlBar({
        position:{
            right:'10px',
            top:'10px'
        }
    });
    controlBar.addTo(map);

    var toolBar = new AMap.ToolBar({
        position:{
            right:'40px',
            top:'110px'
        }
    });
    toolBar.addTo(map);

    map.setMapStyle('amap://styles/blue');
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22],
    });

    trafficLayer.setMap(map);
}
mapInit()
  • 全局变量：声明了一个全局变量map，用于存储地图实例。
  • mapInit函数：
    • 创建地图实例：使用new AMap.Map创建地图实例，指定地图容器为id为container的元素，并设置了一系列地图属性，包括旋转、俯仰、缩放级别、视角倾斜度、旋转角度、视图模式、缩放范围以及地图中心坐标。
    • 添加控制栏：创建ControlBar实例并添加到地图上，设置其位置在右上角。
    • 添加工具栏：创建ToolBar实例并添加到地图上，设置其位置在右上角稍下方。
    • 设置地图样式：使用map.setMapStyle方法将地图样式设置为蓝色主题。
    • 添加实时路况图层：创建TileLayer.Traffic实例，设置其层级和可见缩放范围，并将其添加到地图上。
  • 调用函数：最后调用mapInit函数来初始化地图

完整代码：

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="//webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2&plugin=AMap.ControlBar,AMap.ToolBar"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;
function mapInit(){
  map = new AMap.Map('container', {
    rotateEnable:true,
    pitchEnable:true,
    zoom: 17,
    pitch: 50,
    rotation: -15,
    viewMode:'3D', //开启3D视图,默认为关闭
    zooms:[2,20],
    center:[114.081428,32.130259]
  });
  
  var controlBar = new AMap.ControlBar({
    position:{
      right:'10px',
      top:'10px'
    }
  });
  controlBar.addTo(map);
  
  var toolBar = new AMap.ToolBar({
    position:{
      right:'40px',
      top:'110px'
    }
  });
  toolBar.addTo(map);

   map.setMapStyle('amap://styles/blue');
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22],
    });

    trafficLayer.setMap(map);
}
mapInit()
</script>
</body>
</html>


<template>
  <div id="container" class="map-container"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      // 引入高德地图API脚本
      const script = document.createElement('script');
      script.src = `//webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2&plugin=AMap.ControlBar,AMap.ToolBar`;
      script.async = true;
      script.onload = () => {
        this.initMap();
      };
      document.head.appendChild(script);
    },
    initMap() {
      this.map = new AMap.Map('container', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: 17,
        pitch: 50,
        rotation: -15,
        viewMode: '3D',
        zooms: [2, 20],
        center: [114.081428, 32.130259]
      });

      const controlBar = new AMap.ControlBar({
        position: {
          right: '10px',
          top: '10px'
        }
      });
      controlBar.addTo(this.map);

      const toolBar = new AMap.ToolBar({
        position: {
          right: '40px',
          top: '110px'
        }
      });
      toolBar.addTo(this.map);

      this.map.setMapStyle('amap://styles/blue');

      const trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22]
      });
      trafficLayer.setMap(this.map);
    }
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>

截图展示：

地址转坐标：利用高德API进行批量地理编码
weixin_45812624的博客
08-05 6767
本文介绍了如何批量将地址数据转换为地理坐标的几种方法。首先，通过使用高德地图的地理编码API，可以直接在线批量转换地址为GCJ-02坐标系下的经纬度坐标。此方法适用于个人开发者，每日限额为5000条数据。对于无法自动转换的地址，可以手动使用高德坐标拾取器获取坐标。此外，还提供了Python脚本示例，用于自动化处理XLSX文件中的地址数据，将其转换为带有经纬度的坐标信息，并保存为新的Excel文件。对于需要转换坐标系的需求，可以利用在线工具将GCJ-02坐标转换为WGS84或BD09坐标系。
利用高德API获取整个城市的公交路线并可视化（五）
weixin_45812624的博客
10-17 1821
本文介绍了利用高德地图API获取公交线路数据的方法，并优化了数据处理流程，实现了数据的自动化导出。具体步骤包括：通过高德地图JS API 1.4 示例中的公交线路查询功能下载指定公交线路的JSON数据；读取JSON文件中的公交线路折点坐标并连成线段；使用坐标转换算法将高德坐标系（GCJ-02）的数据转换为国际通用的WGS84坐标系；最后，采用Python脚本处理转换后的数据，导出为CSV和SHP格式，便于地理信息系统（GIS）软件进一步分析和可视化。
【无标题】利用高德地图api获取交通态势代码
qq_37008628的博客
04-18 1154
利用高德地图api获取交通态势代码
vue 高德地图 实时路况
Kenom_的博客
06-11 874
高德地图实时路况
Python应用指南：高德交通态势数据（一）
最新发布
weixin_45812624的博客
01-07 3452
本文通过高德地图推出的交通态势查询API，用于实时获取指定区域或道路的交通状况，旨在帮助优化出行规划和提升城市管理效率。文章详细介绍了如何利用矩形区域查询功能高效获取路况信息，并通过Python脚本自动化处理流程，包括生成矩形范围、调用API获取数据、坐标转换及导出SHP文件等步骤。整个过程不仅简化了数据处理，还确保了地理信息系统间的兼容性，为智能交通系统的发展提供了有力支持。
高德开放平台API调用实战指南
热门推荐
K48932的博客
10-12 1万+
开发者可以在地图上添加自定义标记，以展示特定地点的信息。// 添加自定义标记position: [116.397428, 39.90923], // 标记的经纬度title: '高德公司', // 标记标题map: map // 将标记添加到地图});通过这个简单的标记，开发者可以在地图上展示特定地点，如用户的当前位置、公司地址等。高德开放平台的API为开发者提供了强大的位置服务工具，涵盖了地图展示、路线规划、定位服务、交通查询、智能调度等多个方面。
高德地图定位api使用
weixin_43891731的博客
07-21 1263
高德地图定位api使用 <!--<script src='https://webapi.amap.com/maps?v=2.0&key=你的key'></script>--> var amp = AMap.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ // 是否使用高精度定位，默认：true enableHighA
vue2 - 详细实现高德地图交通实时路况拥堵缓行通畅颜色块(红黄绿)，vue高德地图实时路况图层渲染显示教程，如何在高德地图中展示某个区域路段的实时交通拥堵情况，交通路段是否通行顺畅，实时交通路况图
weixin_41513488的博客
09-02 615
这样，您就可以在高德地图中展示某个区域路段的实时交通拥堵情况，并使用不同的颜色块表示交通路况的通畅程度。替换为您希望展示的地图中心点的实际经纬度。替换为您的实际高德地图API密钥。替换为您实际的数值。
python爬取路况信息_高德地图api获取路况信息（python版）
weixin_30737027的博客
02-21 3116
1.依旧是先申请key2.查看urlhttps://restapi.amap.com/v3/traffic/status/circle?location=116.3057764,39.98641364&radius=1500&key=你的密钥&extensions=all3.代码import pandas as pdimport requestsr =requests.ge...
Web前端实现高德地图、点标记锚点、引用、引入
CSDN博客主页地址：https://mengjian.blog.csdn.net/
03-31 4302
Web前端实现高德地图、点标记锚点、引用、引入
利用Python爬虫+高德api选择租房.zip
02-27
利用Python爬虫+高德api选择租房.zip 一个上海租房选择程序 (Python爬虫+高德API) 参考实验楼Python爬虫+高德api解决租房问题 抓取了链家、安居客、58同城、赶集网、房天下五个网站上海所有租房信息。 pip install...
java基于高德地图实现实时查询天气功能，api二次开发
04-05
在Java编程语言中，利用高德地图API进行实时天气查询是一项常见的需求，特别是在构建智能应用或者集成地理位置服务的系统中。高德地图提供了一系列丰富的接口，允许开发者通过API调用来获取地图、导航、位置以及天气...
集成高德sdk查看交通路况
qq_33442844的博客
05-10 2018
废话交通态势信息是由当前时刻和未来某一时刻的交通状况信息构成，目前该功能仅对当前时刻对交通状况（路况）信息进行了透出。这篇有点尴尬的是，实在不好用地图来演示，所以就简单地打印一下信息，知道有哪些数据就可以了。看代码TrafficSearch trafficSearch = new TrafficSearch(this); trafficSearch.setTrafficSearchListener...
pc端高德Api学习
m0_62823653的博客
11-02 334
第三步：引入高德Api第四步：简单创建一个地图。在构造参数中的container为准备阶段添加的地图容器的id。
高德地图填坑手册（持续更新）
虎踞丘上的博客
01-10 687
高德地图填坑手册
vue+高德地图
qq_41856165的博客
02-14 306
文章参考：高德地图：概述-地图 JS API v2.0 | 高德地图API (amap.com)注册高德地图并申请key。public文件夹下index.html中 设置容器的的宽度和高度（注：一定要设置容器的宽高） 初始化地图 完整代码 3.高德地图定位 高德地图Api有两种，分别是ip定位和浏览器定位；大部分浏览器已不支持http协议的定位请求，在定位时应采用https协议 本地测试谷歌浏览器定位失败，应该和https协议有关；edgn浏览器定位成功，并返回数据暂时先学习
内网走nginx代理访问高德webapi2.0
邹玉杰（邹琼俊）的专栏
11-16 2784
需求：客户的电脑都只能访问内，服务器可以访问外网，客户电脑使用的项目中用到了高德webapi2.0。10.200.31.45:32100是我们的web服务器。 网上基本上都是对高德webapi1.4的配置方式，而web2.0有一些差别。 1.前端修改高德地图的js应用 如果是index.html引入， 修改之前的应用： <script type="text/javascript"...
高德地图的前端JS调用方法（课堂笔记）
weixin_73218936的博客
06-06 1621
个人程序开发以后要用。
高德地图使用-引用
不靠谱的作曲家
12-21 355
使用高德地图之前需在高德地图开放平台注册账号。在控制台-我的应用-创建应用，获取得到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张謹礧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值