百度3D地图API的调用以及适应过程

简介:

做软件工程大作业的时候需要使用到baidu地图的API。这里将调用百度地图API的过程说明一下。其实大部分是参照百度API的实例说明做了。只做了一些小小的改动。因为个人对javascript非常不熟。只能一边写代码一边上网查找。为了使地图显示效果达到和follow5显示的效果一致,我自己写了一个javascript函数show()。估计这个就是此处的重点吧。

aspx页面

html代码唯一要注意的就是

<div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地图-->

因为这个是地图显示的div。注意的是id必须和下文javascript代码中的id保持一致。
<div style="height:auto; width:1440px;">
            <div style=" background-color:#CCC; height:600px; float:left; margin:10px auto auto 40px; width:800px; border:solid 3px #CCC">
            <div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地图-->
            </div>
            <div style="width:500px; height:550px; float:left; margin:auto auto auto 5px;">
                <div style="height:30px; width:450px; padding-bottom:0px;"></div>
                <div style="width:442px;Z-INDEX:1;height:560px;OVERFLOW:auto;">
                    <table cellpadding="5px" cellspacing="20px" style="font:'微软雅黑'; color:#FFF;">
                    
                        <asp:Literal ID="ltrShow" runat="server"></asp:Literal><!--右框显示数据-->
                   
                    </table>
                </div>
                <div style="height:30px; width:450px; padding-top:0px;"></div>
            </div>
        </div>


JS部分(放在aspx页面底部即可)

当然还需要在aspx页面的head里面加入一段

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

这个表示将baidu地图提供的api文件包涵进来。不然下面的javascript代码是无法执行的。

var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
表示新建一个地图对象。第一个参数为你显示的div的id。第二个参数为地图类型,BMAP_PERSPECTIVE_MAP表示的是3D模式。
var point = new BMap.Point(113.403, 23.070);
设置地图中心坐标。113.403, 23.070 是广州大学城的坐标。可以自己设置。
map.setCurrentCity("广州");  
设置地图显示的城市 此项是3D模式地图必须设置的。
map.centerAndZoom(point,18);
设置中心点级默认的地图缩放大小。缩放范围为1-19.。。越大表示越精细,比例尺越大。
map.enableScrollWheelZoom(true);
设置地图是否可以缩放。这里设置可以缩放
show(i)函数是可以将窗口跳动显示的核心。当然我只是依葫芦画瓢自己写的。setTimeout("函数",时间)表示每隔固定的时间调用函数一次。所以这里会一直每隔5秒就会调用一次show()函数。因为后台数据传送过来的是30条数据,当显示完数据的时候需要重头开始。将i重新设置为0.其实我觉得用i%30更加优化。
<script type="text/javascript">

var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
var point = new BMap.Point(113.403, 23.070);
map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point,18);
map.enableScrollWheelZoom(true);

var opts = {
  width : 300,     // 信息窗口宽度
}

var BASEDATA = <%=jsData %>
                
function show(i){
    var infoWindow = new BMap.InfoWindow(BASEDATA[i].t,opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, new BMap.Point(BASEDATA[i].j,BASEDATA[i].w));      // 打开信息窗口
    i++;
    if(i>=BASEDATA.length)
    i=0;
    timer = setTimeout("show("+i+")", 5000);
}
show(0);
</script>

cs后台代码

因为没有调用数据库,所以将循环显示一段数据。只改变经纬度的位置,数据就不保持变化了。

ltrShow是literal控件。在地图左侧显示所有内容。

jsData是一个全局变量,目的是为了将后台的数据传递给js代码中的BASEDATA变量。

public string jsData = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        ShowData();
    }
    //显示数据
    //显示数据
    void ShowData()
    {
        int count = 30;
            ltrShow.Text = "";
            jsData = "[";//传递给js数据的变量
            for (int i = 0; i < count; i++)
            {
                ltrShow.Text += "<tr>";
                ltrShow.Text += "<td class='style3'><a href='http://weibo.com/rondsny'><img src='http://tp1.sinaimg.cn/1719298984/50/5620017623/1'>";
                ltrShow.Text += "</a><br/><center>Ron_N";
                ltrShow.Text += "</center></td><td class=\"style2\">你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/";
                ltrShow.Text += "</td></tr>";
                string jsContent = "";
                sContent += "<img style='float:right;margin:4px' id='imgDemo' src='http://ww1.sinaimg.cn/bmiddle/667a6ba8gw1dohjaa085zj.jpg' width='139' title=''/>";
                jsContent += "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/</p>";
                jsContent += "</div>";
                jsData += "{t:\"" + jsContent + "\",j:\"" + 113.403+i/10 + "\",w:\"" + 23.070+i/10 + "\"},";
            }
            jsData += "]";//传递给js数据的变量
        }
    }

以上就是调用和修改的过程。个人涉及的只是一点牛毛而已。主要为了完成作业。

有什么说的不好或者不清楚的地方,欢迎各位指正。


相关文章
|
数据可视化 前端开发 搜索推荐
数字孪生可视化开发技术(ThingJS)学习笔记
数字孪生可视化开发技术(ThingJS)学习笔记
779 0
|
机器学习/深度学习
YOLOv5改进 | 主干篇 | 轻量级网络ShuffleNetV2(附代码+修改教程)
YOLOv5改进 | 主干篇 | 轻量级网络ShuffleNetV2(附代码+修改教程)
501 0
|
11月前
|
UED 开发者
flutter:获取对象&路由管理 (四)
本文介绍了Flutter中如何通过Context获取状态对象、使用GlobalKey获取状态对象、基本的路由管理、路由传值、命名路由、返回根路由以及点击图标跳转的方法。示例代码展示了如何在应用中实现这些功能,包括页面跳转、传递参数和返回上一页等操作。
145 0
|
9月前
|
编解码
网站视频下载工具分享
[Cobalt](https://cobalt.tools/) 是一款无广告、无跟踪器的高效媒体下载器。它支持全平台内容下载,包括B站、YouTube、Instagram等,涵盖视频、音频、字幕等格式,分辨率从480P到8K+。无需注册,直接使用,简单快捷。还提供批量下载和自定义选项,提升下载效率。
|
消息中间件 大数据 Kafka
❤️大数据开发必备:推荐7款大数据开发神器工作效率提升1000%【推荐收藏】
❤️大数据开发必备:推荐7款大数据开发神器工作效率提升1000%【推荐收藏】
371 1
|
10月前
|
机器学习/深度学习 算法 5G
基于MIMO系统的SDR-AltMin混合预编码算法matlab性能仿真
基于MIMO系统的SDR-AltMin混合预编码算法通过结合半定松弛和交替最小化技术,优化大规模MIMO系统的预编码矩阵,提高信号质量。Matlab 2022a仿真结果显示,该算法能有效提升系统性能并降低计算复杂度。核心程序包括预编码和接收矩阵的设计,以及不同信噪比下的性能评估。
227 3
|
数据采集 存储 运维
提升团队工程交付能力,从“看见”工程活动和研发模式开始
本文从统一工程交付的概念模型开始,介绍了如何将应用交付的模式显式地定义出来,并通过工具平台落地。
123337 420
|
缓存 Linux
Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stoc
CentOS 默认的镜像源可能无法访问。可以更换为其他镜像源,例如阿里云、腾讯云等。
1166 7
|
Linux vr&ar C语言
Linux怎样更新Centos下Gcc版本支持C17?Centos7快速安装gcc8.3.1 可支持C++17(附gcc相关链接整理)
Linux怎样更新Centos下Gcc版本支持C17?Centos7快速安装gcc8.3.1 可支持C++17(附gcc相关链接整理)
1014 2
|
12月前
|
API 数据处理 数据库
掌握 Kotlin Flow 的艺术:让无限数据流处理变得优雅且高效 —— 实战教程揭秘如何在数据洪流中保持代码的健壮与灵活
Kotlin Flow 是一个强大的协程 API,专为处理异步数据流设计。它适合处理网络请求数据、监听数据库变化等场景。本文通过示例代码展示如何使用 Kotlin Flow 管理无限流,如实时数据流。首先定义了一个生成无限整数的流 `infiniteNumbers()`,然后结合多种操作符(如 `buffer`、`onEach`、`scan`、`filter`、`takeWhile` 和 `collectLatest`),实现对无限流的优雅处理,例如计算随机数的平均值并在超过阈值时停止接收新数据。这展示了 Flow 在资源管理和逻辑清晰性方面的优势。
210 0