这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的x和y坐标。

下行代码创建了地图：

var map = new esri.Map("map");

上面行中"Map"出现了三次。第一次(var map)是对象的名称，第二次 (esri.Map)是类的名称,第三次("map")是将包含地图的DIV的名称。

这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个cachedArcGIS Server地图服务，但是也可以使用ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。

注意切片地图服务层的构造函数需要服务的REST端点的URL(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地图服务的URL。

这两行代码增加了事件监听器到地图。一个监听器为了onMouseMove，另外一个为了onMouseDrag，但是他们都是调用函数showCoordinates:

dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);

这些事件都传递地图点坐标到showCoordinates函数。下列代码是函数如何获得坐标并写到"info"标签：

var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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>Create Map Display Mouse Coordinate</title>

     <link rel="stylesheet" type="text/css" href="styles.css"

           href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/theme/tundra/tundra.css">

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

     <script type="text/javascript">

         dojo.require("esri.map");

         function init(){

             var map = new esri.Map("map");

             dojo.connect(map,"onLoad",function(){

                 //地图加载后，监听到鼠标移动或拖动事件

                 dojo.connect(map,"onMouseMove",showCoordinates);

                 dojo.connect(map,"onMouseDrag",showCoordinates);

             });

             var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(

                 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"

             );

             map.addLayer(tiledMapServiceLayer);

         }

         //显示坐标的回调函数，参数是evt

         function showCoordinates(evt){

             //从事件中获取mapPoint

             var mp = evt.mapPoint;

             //显示鼠标坐标

             dojo.byId("info").innerHTML = mp.x + "," + mp.y;

         }

         dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     <div id="map" style="position:relative;width:900px;height:600px;border:1px solid #000;">

         <span id="info" style="position:absolute;right:25px;bottom:5px;color:#000;z-index:50;"></span>

     </div>

   </body>

 </html>

ArcGIS api for javascript——加入地图并显示x,y坐标的更多相关文章

  1. ArcGIS api for javascript——加入地图并显示当前地图范围

    描述 这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 "书签". 使用下列行创建地图: var map = new esri.Map(&qu ...

  2. ArcGIS api for javascript——使用图层定义显示地图

    描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...

  3. ArcGIS api for javascript——鼠标悬停时显示信息窗口

    描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...

  4. ArcGIS api for javascript——创建地图

    描述 这个示例显示ArcGIS Server的一个地图.ArcGIS Server地图是缓存的,意味着它有服务器管理员建来提升性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMap ...

  5. 地图上显示X,Y 坐标代码

    事件数据 所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据,通过这两个参数可以获取相关事件数据,使用GetPosition方法或者Source.H ...

  6. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  7. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

  8. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  9. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

随机推荐

  1. windows下mysql解压版安装及centos下mysql root密码忘记

    windows安装 1. 下载zip版的解压后将bin添加到path. 2. 修改解压目录D:\mysql\mysql-5.7.12-winx64下的my.ini,设置路径: 还要添加 [client ...

  2. hdu 2037 - 典型贪心*

    题目链接 给一堆电视节目的起止时间,问最多能完整收看几个节目 --------------------------------------------------------------------- ...

  3. 优动漫PAINT-绘制透明布料教程

    原是一篇日语教程,觉得挺不错的,就劳烦会日语的朋友帮忙翻译了,特此分享!希望可以帮助到大家在绘画上的学习!原教程转载优动漫官网. 作者:JaneMere 相关资讯还可以关注www.dongmansof ...

  4. div隐藏但是依然占位置

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  5. [洛谷P1580]yyy loves Easter_Egg I

    题目大意:很多人@一个人,如果那个人忍不住说话了,就轰炸成功,如果那个人没说话或者别的人没有@他或@很多个人,则轰炸失败.(具体见原题) 解题思路:字符串处理,好好用sscanf即可(细节见代码). ...

  6. BZOJ 1951 [SDOI2010]古代猪文 (组合数学+欧拉降幂+中国剩余定理)

    题目大意:求$G^{\sum_{m|n} C_{n}^{m}}\;mod\;999911659\;$的值$(n,g<=10^{9})$ 并没有想到欧拉定理.. 999911659是一个质数,所以 ...

  7. 火狐添加消息头 Modify Header Value (HTTP Headers)

    火狐浏览器添加组件 : Modify Header Value (HTTP Headers)

  8. 【Python常见问题总结】

    1. python2 中 end = '' 取消换行没有用 解决办法: 在程序开始加入 from __future__ import print_function 2. 如何在电脑上同时使用pytho ...

  9. nessus 漏洞扫描安装和使用

    介绍 Nessus 是目前全世界最多人使用的系统漏洞扫描与分析软件.总共有超过75,000个机构使用Nessus 作为扫描该机构电脑系统的软件.  软件特色 * 提供完整的电脑漏洞扫描服务, 并随时更 ...

  10. mariadb数据库基础知识及备份

    数据库介绍 1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来管理 ...