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

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

十余年的柳河网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整柳河建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“柳河网站设计”,“柳河网站推广”以来,每个客户项目都认真落实执行。

aspx页面

html代码唯一要注意的就是

 
 
 
 

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

 
 
 
  1.  
  2.              
  3.             
 
  •             
  •  
  •              
  •                  
  •                  
  •                      
  •                       
  •                          
  •                      
  •                      
  •                  
  •                  
  •              
  •          
  • JS部分(放在aspx页面底部即可)

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

     
     
     
    1.  

    这个表示将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.  
    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.  

    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 += "";  
    16.                ltrShow.Text += "";  
    17.                ltrShow.Text += "
      Ron_N";  
    18.                ltrShow.Text += "你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/";  
    19.                ltrShow.Text += "";  
    20.                string jsContent = "";  
    21.                sContent += "";  
    22.                jsContent += "你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/

      ";  
    23.                jsContent += "";  
    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之自定义地图类型

    本文题目:百度3D地图API的调用以及适应过程
    标题网址:http://www.shufengxianlan.com/qtweb/news29/272679.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    网站建设知识

    各行业网站