【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图

需求

Web端使用场景中会涉及到地图导航路线情况,并利用热力图显示路况信息。

实现效果如下:

输入起始地点,选择并开始导航

最终效果

思路步骤

利用百度地图API显示地图交通拥堵情况的热力图,需要按照以下步骤进行开发

步骤1:注册并获取API密钥

  1. 访问百度地图开放平台,注册一个开发者账号(如果还没有的话)。

  2. 登录后,在控制台创建一个新的应用,填写应用的基本信息,并选择所需的API服务,如“JavaScript API”、“Web服务API”等,具体取决于您的开发需求。

  3. 创建应用后,您将获得一个唯一的API Key(AK)。请妥善保管此密钥,它将在后续代码中用于验证您的应用身份。

步骤2:选择合适的API服务

根据您的应用场景,您可以选择以下方式之一来显示交通拥堵热力图:

方式A:使用JavaScript API在网页中动态加载地图

适用于在Web页面中嵌入交互式地图,用户可以直接在浏览器中查看实时交通状况。

步骤:

  1. 引入百度地图JavaScript API库:

    1<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

    将 YOUR_API_KEY 替换为您在步骤1中获取的实际API密钥。

  2. 在HTML文档中添加一个用于承载地图的 <div> 元素:

    1<div id="map" style="width: 100%; height: 600px;"></div>
  3. 使用JavaScript编写代码来初始化地图、开启交通图层,并设置地图中心为贵阳市中心坐标:

    1var map = new BMap.Map("map");  // 创建地图实例
    2map.centerAndZoom(new BMap.Point(106.712891, 26.578347), 10);  // 设置地图中心点和缩放级别
    3
    4var trafficLayer = new BMap.TrafficLayer();  // 创建交通图层实例
    5trafficLayer.setMap(map);  // 添加交通图层到地图
    6
    7// 可选:开启热力图层(如果百度地图API提供了独立的热力图层服务)
    8var heatmapLayer = new BMap.HeatmapLayer();
    9heatmapLayer.setMap(map);
    10// 配置热力图数据源(可能需要通过API接口获取实时交通数据)
    11heatmapLayer.setData(/* 实时交通数据 */);

    注意: 上述示例中的热力图层部分仅为示例,实际百度地图API可能并不直接提供交通拥堵热力图作为单独的图层,而是通过交通图层本身展示拥堵情况。请查阅最新的百度地图API文档以了解确切的实现方式。

方式B:使用Web服务API获取数据,自行绘制热力图

适用于在非Web环境(如移动应用、桌面应用)中,或者需要自定义热力图样式的情况下,通过API获取交通数据,然后在您的应用程序中处理并绘制热力图。

步骤:

  1. 查阅百度地图开放平台文档,找到提供交通数据的Web服务API(如路况查询API),并根据文档说明构造请求URL,包含您的API密钥以及所需查询的区域(如贵阳市)。

  2. 发送HTTP请求到API地址,获取返回的交通数据。

  3. 解析返回的数据,提取出与交通拥堵相关的数据字段,如拥堵等级、拥堵路段等。

  4. 使用合适的图表库(如D3.js、Leaflet.js配合heatmap插件等)或地图SDK,根据获取的数据绘制热力图。

步骤3:测试与优化

完成代码编写后,运行您的应用或网页,检查地图是否正确加载,交通拥堵热力图是否正常显示。根据实际情况调整地图参数、热力图样式等,确保用户体验良好。

完整代码如下:

完整的html代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>百度地图导航Demo</title>
  <!-- 引入百度地图API -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API"></script>
  <!-- 引入百度地图API的热力图库 -->
  <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
</head>
<body>
<!-- 输入框:出发地 -->
<label for="origin">出发地:</label>
<input type="text" id="origin" placeholder="请输入出发地名称">

<!-- 输入框:目的地 -->
<label for="destination">目的地:</label>
<input type="text" id="destination" placeholder="请输入目的地名称">
<button onclick="navigate()">搜索</button>

<!-- 地图容器 -->
<div id="map" style="width: 100%; height: 600px;"></div>

<!-- 路况信息 -->
<div id="trafficInfo"></div>

<script>
  // 初始化地图
  var map = new BMap.Map("map");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 使用北京有地图的热力图显示116.404, 39.915,贵阳106.630153,26.647661

  // 创建热力图图层
  var trafficLayer = new BMap.TrafficLayer();
  map.addTileLayer(trafficLayer);


  function navigate() {
    const origin = document.getElementById("origin").value;
    const destination = document.getElementById("destination").value;

    // 创建地址解析器实例
    const geocoder = new BMap.Geocoder();

    // 解析出发地坐标
    geocoder.getPoint(origin, function(point) {
      if (point) {
        // 在地图上添加标记
        const marker = new BMap.Marker(point);
        map.addOverlay(marker);
      }
    });

    // 解析目的地坐标
    geocoder.getPoint(destination, function(point) {
      if (point) {
        // 在地图上添加标记
        const marker = new BMap.Marker(point);
        map.addOverlay(marker);

        // 绘制导航线路
        const driving = new BMap.DrivingRoute(map, { renderOptions: { map: map } });
        driving.search(origin, destination);
      }
    });
  }
</script>
</body>
</html>

  • 26
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里提供一个使用百度地图APIJava代码示例,实现在地图上显示大连市各区域医院数量的可视化效果。 前提:首先你需要在百度地图开放平台上注册账号,并创建一个应用,获取到AK(密钥)。 代码示例: ```java import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLEncoder; import org.json.JSONArray; import org.json.JSONObject; public class MapDemo { public static void main(String[] args) throws IOException { String ak = "这里替换为你的AK"; String city = "大连市"; String[] districts = {"中山区", "西岗区", "沙河口区", "甘井子区", "旅顺口区", "金州区", "普兰店区", "瓦房店市", "庄河市", "长海县"}; int[] hospitalCount = new int[districts.length]; for (int i = 0; i < districts.length; i++) { String district = districts[i]; String urlStr = "http://api.map.baidu.com/place/v2/search?query=医院&region=" + URLEncoder.encode(city + district, "UTF-8") + "&output=json&ak=" + ak; URL url = new URL(urlStr); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setRequestMethod("GET"); BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8")); StringBuilder sb = new StringBuilder(); String line; while ((line = reader.readLine()) != null) { sb.append(line); } reader.close(); JSONObject jsonObj = new JSONObject(sb.toString()); int total = jsonObj.getInt("total"); hospitalCount[i] = total; } StringBuilder data = new StringBuilder("["); for (int i = 0; i < districts.length; i++) { data.append("{name:'").append(districts[i]).append("',value:").append(hospitalCount[i]).append("},"); } data.deleteCharAt(data.length() - 1); data.append("]"); String html = "<!DOCTYPE html>" + "<html>" + "<head>" + " <meta charset=\"utf-8\">" + " <title>大连市各区医院数量</title>" + " <script src=\"http://api.map.baidu.com/api?v=2.0&ak=" + ak + "\"></script>" + "</head>" + "<body style=\"margin:0;padding:0;\">" + " <div style=\"width:100%;height:100%;\" id=\"map\"></div>" + " <script type=\"text/javascript\">" + " var myChart = echarts.init(document.getElementById('map'));" + " var option = {" + " title: {" + " text: '大连市各区医院数量'," + " left: 'center'" + " }," + " tooltip: {" + " trigger: 'item'," + " formatter: '{b}: {c}'" + " }," + " bmap: {" + " center: ['121.614682', '38.914003']," + " zoom: 11," + " roam: true" + " }," + " series: [{" + " type: 'effectScatter'," + " coordinateSystem: 'bmap'," + " data: " + data + "," + " symbolSize: function (val) {" + " return val[2] / 10;" + " }," + " label: {" + " normal: {" + " formatter: '{b}'," + " position: 'right'," + " show: false" + " }," + " emphasis: {" + " show: true" + " }" + " }," + " itemStyle: {" + " normal: {" + " color: '#F06C00'" + " }" + " }" + " }]" + " };" + " myChart.setOption(option);" + " </script>" + "</body>" + "</html>"; System.out.println(html); } } ``` 说明: 1. 首先获取到百度地图API的AK(密钥),并设置要查询的城市和区域; 2. 循环查询每个区域中医院的数量; 3. 将查询结果转换为JSON格式的字符串,用于在地图上显示; 4. 生成HTML页面,使用ECharts来绘制地图,并将查询结果显示在地图上。 需要注意的是,该示例代码仅供参考,如需使用请根据自己的实际情况进行修改。另外,如需使用百度地图API,建议先查看官方文档以了解API的使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值