这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的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. 解决IE7、IE8样式不兼容问题

    方法:要在页面中加入如下HTTP meta-tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateI ...

  2. 51nod-1134 最长递增子序列，用线段树将N^2的dp降到NlogN

    题目链接 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10. Input 第1行 ...

  3. VB学习笔记（一）VB操作字符串

    在vb中 dim a# 定义a变量为双精度型变量~ #是类型符 % 整型 & 长整型 !单精度 $ 字符型 VB中strconv 的作用 StrConv("要转换的字符串" ...

  4. Manacher笔记

    (其实还是回文自动机好用,毛子真是牛逼) Manacher #include<iostream> #include<cstring> #include<cstdio> ...

  5. SFTP使用key文件登录

    命令: sftp -oPort= -oIdentityFile=/root/.ssh/user.priv user@39.39.100.100 命令选项: -o ssh_option Can be u ...

  6. 推荐学习《组织与管理研究的实证方法(第2版)》中文PDF

    在写文章论文时,会涉及到观点论证,需要掌握一些实证方法. 建议学习<组织与管理研究的实证方法(第2版)>,对管理研究中涉及的方法进行了介绍,例如实验室研究,二手数据的研究,实地研究等,这对 ...

  7. Vir-manager 创建虚拟机

  8. 微信小程序 分享海报

    const app = getApp(); const template = require('../../template/templates.js'); Page({ /** * 页面的初始数据 ...

  9. 教你用webpack搭一个vue脚手架[超详细讲解和注释！]

    1.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同 ...

  10. UT源码+105032014018

    设计佣金问题的程序 commission方法是用来计算销售佣金的需求,手机配件的销售商,手机配件有耳机(headphone).手机壳(Mobile phone shell).手机贴膜(Cellphon ...