其实大部分是参照百度API的实例说明做了。只做了一些小小的改动。因为个人对javascript非常不熟。只能一边写代码一边上网查找。为了使地图显示效果达到和follow5显示的效果一致,我自己写了一个javascript函数show()。估计这个就是此处的重点吧。
十余年的柳河网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整柳河建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“柳河网站设计”,“柳河网站推广”以来,每个客户项目都认真落实执行。
aspx页面
html代码唯一要注意的就是
因为这个是地图显示的div。注意的是id必须和下文javascript代码中的id保持一致。
JS部分(放在aspx页面底部即可)
当然还需要在aspx页面的head里面加入一段
这个表示将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更加优化。
- 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);
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 += "";
- ltrShow.Text += "
";
- ltrShow.Text += "
Ron_N"; - ltrShow.Text += "
你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/"; - ltrShow.Text += "";
- string jsContent = "";
- sContent += "
";
- jsContent += "
你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/
";- jsContent += "";
- jsData += "{t:\"" + jsContent + "\",j:\"" + 113.403+i/10 + "\",w:\"" + 23.070+i/10 + "\"},";
- }
- jsData += "]";//传递给js数据的变量
- }
- }
以上就是调用和修改的过程。
原文:http://www.cnblogs.com/rond/archive/2011/12/29/2306024.html
【编辑推荐】
网站名称:百度3D地图API的调用以及适应过程
链接地址:http://www.csdahua.cn/qtweb/news29/272679.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网
成都快上网为您推荐相关内容