Bing必应地图中国API-放大与平移

2011-05-24 14:26:32|  分类： Bing&Google|字号 订阅

 
 

有些时候我们不希望通过默认的控制栏来控制地图，而是希望能够自定义放大、缩小按钮。比如在显示某公司的位置时，公司老总只希望别人能够以公司位置为中心放大、缩小地图。
 
所需要做的很简单，增加两个函数：放大和缩小。
      function DoZoomIn(c)
      {
         map.ZoomIn();
      }
    
      function DoZoomOut()
      {
         map.ZoomOut();
      }
然后在html boy中增加两个按钮：
      <div>
         <input type='button' value='放大' onclick='DoZoomIn();' />
         <input type='button' value='缩小' onclick='DoZoomOut();'/>
      </div>
或者，我们想直接指定地图放大的级别，我们可以另外写一个函数：
      function DoZoom()
      {
         var zoom = document.getElementById('zoomLevel').value;
         map.SetZoomLevel(zoom);
      }
然后在html body中增加一个输入框让用户输入放大级别，以及一个按钮：
      <div>
         放大级别:<input id='zoomLevel' type='text' style='width:15px;' value='10' />
         <input type='button' value='显示' onclick='DoZoom();' />
      </div>
最小放大级别为1，即显示世界地图。最大放大级别为17。此处初始值设置为10，能够显示北京全貌。
最后，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
      <script type="text/javascript"> 
  var map = null;
                  
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
         }
       function DoZoomIn(c)
        {
            map.ZoomIn();
        }
        function DoZoomOut()
        {
            map.ZoomOut();
        }
        function DoZoom()
        {
            var zoom = document.getElementById('zoomLevel').value; 
     map.SetZoomLevel(zoom);
        }        
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:600px; height:480px;"></div>
      <div>
         <input type='button' value='放大' onclick='DoZoomIn();' />
         <input type='button' value='缩小' onclick='DoZoomOut();'/>
      </div>
      <div>
         放大级别:<input id='zoomLevel' type='text' style='width:15px;' value='10' />
         <input type='button' value='显示' onclick='DoZoom();' />
      </div>
   </body>
</html>

本讲将展现三种平移方式：经纬度直接平移、手动平移，以及连续平移。
首先我们来看一下经纬度直接平移，我们定义一个平移函数：
      function PanLatLong(c)
      {
         var lat =  document.getElementById('txtMapLat').value;
         var lon =  document.getElementById('txtMapLon').value;
         map.PanToLatLong(new VELatLong(lat, lon));
      }
平移的经纬度从输入框获取，因此需要在html body中增加两个输入框，对应ID分别为txtMapLat和txtMapLon：
      <div>
         维度:<input id='txtMapLat' style='width: 30px' type='text' value='36' />
         经度:<input id='txtMapLon' style='width: 30px' type='text' value='105' />
         <input type='button' value='经纬度平移' onclick='PanLatLong();' />
      </div>
 
第二个功能是手动平移，由用户输入以当前地图为中心平移量的大小。同样，我们需要定义一个函数：
      function PanXY()
      {
         var x =  document.getElementById('txtMapX').value;
         var y =  document.getElementById('txtMapY').value;
         map.Pan(x,y);
      }
我们在html body域增加两个输入框，允许用户输入平移量，ID分别为txtMapX和txtMapY：
      <div>
         X:<input id='txtMapX' style='width: 30px' type='text' value='1' />
         Y:<input id='txtMapY' style='width: 30px' type='text' value='1' />
         <input type='button' value='手动平移' onclick='PanXY();' />
      </div>
 
接下来我们看一下连续平移的实现方法。连续平移在很多地方可以应用，比如在线旅游，显示用户旅游线路的时候可以通过连续平移的方法直观显示用户的足迹。此处我们需要定义两个函数：开始平移和结束平移：
      function StartContinuous()
      {
         var x =  document.getElementById('txtMapXspeed').value;
         var y =  document.getElementById('txtMapYspeed').value;
         map.StartContinuousPan(x,y);
      }
      
      function EndContinuous()
      {
         map.EndContinuousPan();
      }
然后，我们在html body域增加两个按钮，分别对应开始平移和结束平移。并提供一个输入框，允许用户输入连续平移的速度：
      <div>
         X (speed):<input id='txtMapXspeed' style='width: 30px' type='text' value='1' />
         Y (speed):<input id='txtMapYspeed' style='width: 30px' type='text' value='1' />
         <input type='button' value='开始连续平移' onclick='StartContinuous();' />
         <input type='button' value='结束连续平移' onclick='EndContinuous();' />
      </div>
引用：http://www.htchen.com/post/4.html

 
 
 
 
 

Bing必应地图中国API-放大与平移的更多相关文章

  1. Bing必应地图中国API - 在地图上画圆

    Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37|  分类: Bing&Google|字号 订阅     <变形金刚2>上映4日国内票房过亿,基 ...

  2. Bing必应地图中国API入门讲座之八：显示驾车路线

    Bing必应地图中国API入门讲座之八:显示驾车路线 2011-05-24 14:47:36|  分类: Bing&Google|字号 订阅     这篇文章非常值得纪念,因为我是在Googl ...

  3. Bing必应地图中国API - 添加实时交通信息

    Bing必应地图中国API - 添加实时交通信息 2011-05-24 14:44:58|  分类: Bing&Google|字号 订阅     2009年4月23日,微软必应地图中国API新 ...

  4. Bing必应地图中国API一显示地图 (转) 做人要厚道

    Bing必应地图中国API一显示地图 2011-05-24 14:27:31|  分类: Bing&Google|字号 订阅     微软必应地图中国地图API发布已经有10天了,考虑到网上现 ...

  5. Bing必应地图中国API-画线与添加多边形

    Bing必应地图中国API-画线与添加多边形 2011-05-24 14:31:20|  分类: Bing&Google|字号 订阅     在必应地图上画线的功能应用也很广泛:显示从出发地到 ...

  6. Bing必应地图中国API-显示兴趣点 （转）

    Bing必应地图中国API-显示兴趣点 2011-05-24 14:29:55|  分类: Bing&Google|字号 订阅     在地图上显示一个兴趣点,这个应用可以说是最简单但是最广泛 ...

  7. 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图

    最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...

  8. 必应(Bing)每日图片获取API

    必应(Bing)每日图片获取API January 11, 2015 API http://lab.dobyi.com/api/bing.php 介绍 Value Description title ...

  9. 必应语音API(Bing text to speech API)

    前言 Link : Microsoft Speech API overview 通过这个链接,大致了解Bing speech API的语音识别和语音合成两部分, 这次是需要用到TTS,所以就直接看TT ...

随机推荐

  1. C#基础学习（一）

    ---恢复内容开始--- 1.最近被安排去做C#开发,然后开始一连串的看文档·看视屏,发现学C#给自己补了很多基础,C#每个函数变量什么都要先声名,而python可以直接定义: 一.数据类型 1.整数 ...

  2. CODE【VS】3160 最长公共子串 （后缀自动机）

    3160 最长公共子串 题目描述 Description 给出两个由小写字母组成的字符串,求它们的最长公共子串的长度. 输入描述 Input Description 读入两个字符串 输出描述 Outp ...

  3. Poj 2187 凸包模板求解

    Poj 2187 凸包模板求解 传送门 由于整个点数是50000,而求凸包后的点也不会很多,因此直接套凸包之后两重循环即可求解 #include <queue> #include < ...

  4. hdu 2642二维树状数组 单点更新区间查询 模板题

    二维树状数组 单点更新区间查询 模板 从零开始借鉴http://www.2cto.com/kf/201307/227488.html #include<stdio.h> #include& ...

  5. 选学霸（codevs 3372）

    题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所以老师想请你帮他求出他该选多少学霸,才能既不让同 ...

  6. msp430入门学习10

    msp430的定时器--看门狗 msp430入门学习

  7. linux 常见名词及命令（四）

    yum仓库的配置 yum仓库的配置文件存放在/etc/yum.repos.d/目录中. 第一步:切换到/etc/yum.repos.d/目录中. 第二步:使用vim编辑器打开一个名为'rhel7.re ...

  8. Uva - 12230 Crossing Rivers (数学期望)

    你住在村庄A,每天需要过很多条河到另一个村庄B上班,B在A的右边,所有的河都在A,B之间,幸运的是每条船上都有自由移动的自动船, 因此只要到达河左岸然后等船过来,在右岸下船,上船之后船的速度不变.现在 ...

  9. SOJ 2818_QQ音速

    [题意]两只手,一次只能用一只手按一个键子(0,1,2,3),给出从i键到j键所需的消耗的体力,求依次按下一系列键子所需最小体力. [分析] 法一:开一个三维数组,分别记录移动到位置及左右手按的键子. ...

  10. Ubuntu清理内存命令（效果不明显）

    注意:最好不要在生产环境上使用!!! 1.检查内存使用情况 watch -n 3 free -m watch -n 3 cat /proc/meminfo 2.清理 #释放页缓存 echo 1 > ...