arcgis for javascript定制导航箭头

查看在线示例
描述
  

  本例展示了如何为平移地图包括自定义的按钮。地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元。表格里剩余的单元放置标签为8个主要方向的缩写的按钮。每个按钮调用地图上不同的平移函数。例如,"NW"按钮调用 map.panUpperLeft

<button οnclick="map.panUpperLeft();" ID="Button1">NW</button>

在自己的应用里,可以选择任意按钮的格式。甚至可以选择使用图片或者其他控件代替按钮。

  
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Custom map navigation</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/soria/soria.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

      var map;
      function init() {
        map = new esri.Map("map");
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"));
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    This application shows how to create custom navigation buttons.
    <table bgcolor="#eee">
      <tbody>
        <tr>
          <td><button onclick="map.panUpperLeft();">NW</button></td>
          <td align="center"><button onclick="map.panUp();">N</button></td>
          <td><button onclick="map.panUpperRight();">NE</button></td>
        </tr>
        <tr>
          <td valign="middle"><button onclick="map.panLeft();">W</button></td>
          <td><div id="map" class="soria" style="width:1024px; height:512px; border:1px solid #000;"></div></td>
          <td valign="middle"><button onclick="map.panRight();">E</button></td>
        </tr>
        <tr>
          <td><button onclick="map.panLowerLeft();">SW</button></td>
          <td align="center"><button onclick="map.panDown();">S</button></td>
          <td><button onclick="map.panLowerRight();">SE</button></td>
        </tr>
      </tbody>
    </table>
  </body>
< /html>
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值