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

开发 前端
做软件工程大作业的时候需要使用到baidu地图的API。这里将调用百度地图API的过程说明一下。

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

aspx页面

html代码唯一要注意的就是

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

因为这个是地图显示的div。注意的是id必须和下文javascript代码中的id保持一致。

  1. <div style="height:auto; width:1440px;"> 
  2.             <div style=" background-color:#CCC; height:600px; float:left; margin:10px auto auto 40px; width:800px; border:solid 3px #CCC"> 
  3.             <div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地图--> 
  4.             </div> 
  5.             <div style="width:500px; height:550px; float:left; margin:auto auto auto 5px;"> 
  6.                 <div style="height:30px; width:450px; padding-bottom:0px;"></div> 
  7.                 <div style="width:442px;Z-INDEX:1;height:560px;OVERFLOW:auto;"> 
  8.                     <table cellpadding="5px" cellspacing="20px" style="font:'微软雅黑'; color:#FFF;"> 
  9.                       
  10.                         <asp:Literal ID="ltrShow" runat="server"></asp:Literal><!--右框显示数据--> 
  11.                      
  12.                     </table> 
  13.                 </div> 
  14.                 <div style="height:30px; width:450px; padding-top:0px;"></div> 
  15.             </div> 
  16.         </div> 

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

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

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

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

  1. var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP}); 

表示新建一个地图对象。第一个参数为你显示的div的id。第二个参数为地图类型,BMAP_PERSPECTIVE_MAP表示的是3D模式。

  1. var point = new BMap.Point(113.403, 23.070); 

设置地图中心坐标。113.403, 23.070 是广州大学城的坐标。可以自己设置。

  1. map.setCurrentCity("广州");   

设置地图显示的城市 此项是3D模式地图必须设置的。

  1. map.centerAndZoom(point,18); 

设置中心点级默认的地图缩放大小。缩放范围为1-19.。。越大表示越精细,比例尺越大。

  1. map.enableScrollWheelZoom(true); 

设置地图是否可以缩放。这里设置可以缩放

show(i)函数是可以将窗口跳动显示的核心。当然我只是依葫芦画瓢自己写的。setTimeout("函数",时间)表示每隔固定的时间调用函数一次。所以这里会一直每隔5秒就会调用一次show()函数。因为后台数据传送过来的是30条数据,当显示完数据的时候需要重头开始。将i重新设置为0.其实我觉得用i%30更加优化。

  1. <script type="text/javascript">  
  2.  
  3. var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});  
  4. var point = new BMap.Point(113.403, 23.070);  
  5. map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的  
  6. map.centerAndZoom(point,18);  
  7. map.enableScrollWheelZoom(true);  
  8.  
  9. var opts = {  
  10.   width : 300,     // 信息窗口宽度  
  11. }  
  12.  
  13. var BASEDATA = <%=jsData %>  
  14.                   
  15. function show(i){  
  16.     var infoWindow = new BMap.InfoWindow(BASEDATA[i].t,opts);  // 创建信息窗口对象  
  17.     map.openInfoWindow(infoWindow, new BMap.Point(BASEDATA[i].j,BASEDATA[i].w));      // 打开信息窗口  
  18.     i++;  
  19.     if(i>=BASEDATA.length)  
  20.     i=0;  
  21.     timer = setTimeout("show("+i+")", 5000);  
  22. }  
  23. show(0);  
  24. </script> 

cs后台代码

因为没有调用数据库,所以将循环显示一段数据。只改变经纬度的位置,数据就不保持变化了。ltrShow是literal控件。在地图左侧显示所有内容。jsData是一个全局变量,目的是为了将后台的数据传递给js代码中的BASEDATA变量。

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

以上就是调用和修改的过程。

原文:http://www.cnblogs.com/rond/archive/2011/12/29/2306024.html

【编辑推荐】

  1. 百度地图API之如何制作公交导航
  2. 百度地图API开发指南
  3. 百度地图API如何批量转换为百度经纬度
  4. 百度地图API如何给自定义覆盖物添加事件
  5. 详解百度地图API之自定义地图类型
责任编辑:陈贻新 来源: Ron Ngai的博客
相关推荐

2011-09-29 11:00:54

百度地图API

2011-09-16 10:37:42

地图API

2011-10-21 10:16:25

百度地图API

2011-09-26 10:05:19

百度地图API

2011-10-21 09:28:25

百度地图API

2011-10-24 14:01:29

API

2011-09-16 14:39:02

百度地图API

2011-10-09 11:07:40

百度地图API

2023-12-20 17:38:44

APIhttp鸿蒙

2012-02-01 09:33:36

百度地图API

2021-06-15 14:33:00

高德百度腾讯

2015-10-26 12:20:05

百度

2022-03-27 10:04:23

Angular8项目vue

2013-04-08 14:59:54

Android学习笔记百度地图Overlay

2011-10-21 09:11:41

百度地图API

2017-07-21 11:28:57

前端Threejs3D地图

2011-05-25 14:36:17

2012-02-03 14:01:15

地图

2020-12-11 22:02:00

百度地图Apollo

2013-04-08 14:46:42

Android学习笔记百度地图
点赞
收藏

51CTO技术栈公众号