地图开发技术报告（百度地图）

最新推荐文章于 2024-10-14 17:56:38 发布

Tgmmmmmmmm

最新推荐文章于 2024-10-14 17:56:38 发布

阅读量1.3k

点赞数

文章标签：百度交通物流学习

本文链接：https://blog.csdn.net/tgmmmmmmmm/article/details/123818162

版权

地图开发技术报告

文章目录

地图开发技术报告

需求描述

本次需要的软件需要对地图上公交路线站点，以及地铁线路进行展示，更改，重新放置自定义的公交站点，这些应该是需要根据获得的数据进行调整的，希望能够验证方法的通用性，同时能够动态展示变化过程，以此展示工作成果和工作量，预计需要使用到地图开发，自己从头撰写的方案不太可行，因为计算的算法是python，为便于后台计算与程序对接，考虑使用网页展示，后台接口利用python进行开发，可以使用本地的方法进行，不需要服务器进行。

结束回顾：基本需求并未变化，增加部分的地图视角展示以及动态路书，同时对echarts的自定义配置，设计方案可行，但是仍旧未解决组件使用问题，同时希望拓展下载为excel方法。

目前了解信息

该项目是针对公交站点的变化，但是其中的数据并未有太多的了解，包括公交车发车间次，站点路线限制显示等等，动态地球追踪输入地点等。可能设计技术有地图开发，爬虫，动态变化等等。

结束回顾：针对了解信息可以了解大致想要展示的效果来构造，或者已有数据进行模拟，但是需要控制特征，如果纯粹随机效果并不明显。可能错过好的展示方法。

技术筹备方案——百度地图api

基本介绍

百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口，可帮助在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。 GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。

主要功能

基础demo

1. 地图展示

直接使用html进行展示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    </style>
    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AC码"></script>
</head>
<body>
    <div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

2. 站点路线显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AC码"></script>
	  <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>公交/地铁线路查询</title>
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
        }
		#container{
            height:100%;
            width:100%;
        }
		#r-result {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 99;
            width: 250px;
            height: 450px;
            overflow-y: auto;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
        }
    </style>
</head>
<body>
    <div id='container'></div>
    <div id='r-result'></div>
    <script>
        var map = new BMapGL.Map("container");            // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(106.577412,29.49464), 12);

        var busline = new BMapGL.BusLineSearch(map,{
            renderOptions:{map:map,panel:"r-result"},
            onGetBusListComplete: function(result){
                if(result) {
                    var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
                    busline.getBusLine(fstLine);
                }
            }
        });
        function busSearch(){
            var busName = 475;
            busline.getBusList(busName);
        }
        setTimeout(function(){
            busSearch();
        },1500);
    </script>
</body>
</html>