这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的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. MySQL用户添加和分配权限

    mysql数据库insertdelete服务器file mysql> grant 权限1,权限2,…权限n on 数据库名称.表名称 to 用户名@用户地址 identified by ‘连接口 ...

  2. ActiveMQ学习笔记（9）----ActiveMQ静态网络连接

    1. 启动多个Broker 在win10下同一台服务器启动多个Broker, 步骤如下: 1. 复制安装目录下的conf文件夹命名为conf2 2. 修改activemq.xml中的brokerNam ...

  3. 中级前端工程师要掌握的JavaScript 技巧

    1.判断对象的数据类型 2.Es5实现数组map方法 3.使用reduce实现数组map方法 4.ES5 实现数组filter方法 5.使用reduce实现filter方法 6.ES5 实现数组som ...

  4. PHP SOAP 教程

    一.SoapServer 服务器 1.__construct 作用:创建 SoapServer 对象 用法:__construct ( mixed wsdl [, array options] ) 参 ...

  5. POJ-2253 Frogger dijsktra查找间隔最小的路径

    题目链接:https://cn.vjudge.net/problem/POJ-2253 题意 一只Forg需要从节点1走到节点n 现要找一条各个间隔最小的路径 问间隔最小是多少 思路 用dijsktr ...

  6. mven系列问题

    1.前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必备工具行列,但是这次为了把 project1项目完全迁移并应用mave ...

  7. 使用vuex的流程随笔

    1.在建好的vue项目中新建一个vuex文件夹在此文件夹下建一个index.js文件,在此文件下引入vuex 模块(当然需要先npm下载)和vue模块,在引入你所有的自定义的module.js模块(下 ...

  8. 【CS Round 34】Max Or Subarray

    [题目链接]:https://csacademy.com/contest/round-34/summary/ [题意] 让你找一个最短的连续子串; 使得这个子串里面所有数字or起来最大; [题解] 对 ...

  9. 洛谷——P1428 小鱼比可爱

    https://www.luogu.org/problem/show?pid=1428 题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个“比可爱”比赛,比的是每只鱼的可爱程度.参赛的鱼被从 ...

  10. Memcached 集群环境Java客户端

    Memcached 集群环境Java客户端 学习了: http://blog.csdn.net/zhouzhiwengang/article/details/53154112 http://guazi ...