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

下行代码创建了地图：

  1. 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:

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

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

  1. var mp = evt.mapPoint;
  1. dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
  1.  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3.  <html>
  4.    <head>
  5.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.      <meta http-equiv="X-UA-Compatible" content="IE=7" />
  7.      <title>Create Map Display Mouse Coordinate</title>
  8.      <link rel="stylesheet" type="text/css" href="styles.css"
  9.            href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/theme/tundra/tundra.css">
  10.      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
  11.      <script type="text/javascript">
  12.          dojo.require("esri.map");
  13.          function init(){
  14.              var map = new esri.Map("map");
  15.              dojo.connect(map,"onLoad",function(){
  16.                  //地图加载后，监听到鼠标移动或拖动事件
  17.                  dojo.connect(map,"onMouseMove",showCoordinates);
  18.                  dojo.connect(map,"onMouseDrag",showCoordinates);
  19.              });
  20.  
  21.              var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
  22.                  "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"
  23.              );
  24.              map.addLayer(tiledMapServiceLayer);
  25.          }
  26.          //显示坐标的回调函数，参数是evt
  27.          function showCoordinates(evt){
  28.              //从事件中获取mapPoint
  29.              var mp = evt.mapPoint;
  30.              //显示鼠标坐标
  31.              dojo.byId("info").innerHTML = mp.x + "," + mp.y;
  32.          }
  33.  
  34.          dojo.addOnLoad(init);
  35.      </script>
  36.    </head>
  37.  
  38.    <body class="tundra">
  39.      <div id="map" style="position:relative;width:900px;height:600px;border:1px solid #000;">
  40.          <span id="info" style="position:absolute;right:25px;bottom:5px;color:#000;z-index:50;"></span>
  41.      </div>
  42.    </body>
  43.  </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. FCC高级编程篇之Symmetric Difference

    Symmetric Difference Create a function that takes two or more arrays and returns an array of the sym ...

  2. Dbf文件操作

    package cn.com.szhtkj.util; import java.io.File; import java.io.IOException; import java.lang.reflec ...

  3. （2016北京集训十三）【xsy1533】mushroom - bitset

    题解: 神题...我看到的时候直接吓懵了... 这是一道STL题...否则可能要写可持久化ETT或者可持久化Toptree? 用bitset来维护每个蘑菇上哪里有杂草,那么 对于操作1和操作2:可以预 ...

  4. HDU-2087 剪花布条 字符串问题 KMP算法 查匹配子串

    题目链接:https://cn.vjudge.net/problem/HDU-2087 题意 中文题咯 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条, ...

  5. Django之ORM的增删改查

    一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name ="海东",cou ...

  6. windows下matlab代码到ubuntu下中文注释出现乱码

    转自:https://blog.csdn.net/kouyi5627/article/details/81513329 环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从 ...

  7. 斗地主算法的设计与实现(一)--项目介绍&如何定义和构造一张牌

    大学期间,我在别人的基础上,写了一个简易的斗地主程序. 主要实现了面向对象设计,洗牌.发牌.判断牌型.比较牌的大小.游戏规则等算法. 通过这个斗地主小项目的练习,提高了我的面向对象设计能力,加深了对算 ...

  8. JVM分代通俗解释

    JVM分代通俗解释 学习了:https://www.cnblogs.com/zgghb/p/6428395.html

  9. systemverilog中堵塞和非堵塞事件以及同步

    一.SV中非堵塞事件 module test; event ev1, ev2; //belong to logic function part always@(ev1) $display(" ...

  10. POJ 1631 nlogn求LIS

    方法一: 二分 我们可以知道 最长上升子序列的 最后一个数的值是随序列的长度而递增的 (呃呃呃 意会意会) 然后我们就可以二分找值了(并更新) //By SiriusRen #include < ...