associated 2 maps

时间：2022-11-26 00:52:31

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}

#map1Div ,#map2Div,#splitDiv{
float:left;
}

#splitDiv{
width:2px;
background:solid 2px green;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map1,map2;

require(["esri/map", "dojo/_base/connect", "dojo/domReady!"], function(Map, connect) {
map1 = new Map("map1Div", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
map2 = new Map("map2Div", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var panStatus = {source:map1,panning:false,startMap:null,endMap:null};

connect.connect(map1,"onPanStart",function(){
panStatus.panning = true;
});
connect.connect(map1,"onMouseDragStart",function(){
panStatus.source = map1;
});

connect.connect(map1,"onMouseDragEnd",function(){
sameExtent(panStatus.startMap, panStatus.source!=panStatus.startMap);
});

connect.connect(map1,"onExtentChange",function(){
sameExtent(map1);
});
connect.connect(map2,"onPanStart",function(){
panStatus.panning = true;
});
connect.connect(map2,"onMouseDragStart",function(){
panStatus.source = map2;
});
connect.connect(map2,"onMouseDragEnd",function(){
sameExtent(panStatus.startMap, panStatus.source!=panStatus.startMap);
});

connect.connect(map2,"onExtentChange",function(){
sameExtent(map2);
});

function sameExtent(mm,changed){
if((changed||panStatus.source==mm)&&mm==map1){
map2.setExtent(map1.extent,true);
}else if((changed||panStatus.source==mm)&&mm==map2){
map1.setExtent(map2.extent,true);
}
}
});
</script>
</head>

<body>
<div id="map1Div"></div>
<div id="splitDiv"></div>
<div id="map2Div"></div>
</body>
</html>

associated 2 maps的更多相关文章

  1. 检索Google Maps地图位置（小训练）

    名称:检索地图位置 内容:地图初期显示和检索显示 功能:根据条件检索地图的经度与纬度 1.在这之前我们需要创建一个表(Accoun__c),添加一个重要的字段地理位置情報,它会默认的给你两个字段经度和 ...

  2. &lbrack;Erlang 0121&rsqb; 当我们谈论Erlang Maps时&comma;我们谈论什么 Part 3

    Erlang/OTP 17.0 has been released  http://www.erlang.org/download/otp_src_17.0.readme     Erlang/OTP ...

  3. &lbrack;Erlang 0117&rsqb; 当我们谈论Erlang Maps时&comma;我们谈论什么 Part 2

    声明:本文讨论的Erlang Maps是基于17.0-rc2,时间2014-3-4.后续Maps可能会出现语法或函数API上的有所调整,特此说明. 前情提要: [Erlang 0116] 当我们谈论E ...

  4. &lbrack;Erlang 0116&rsqb; 当我们谈论Erlang Maps时&comma;我们谈论什么 Part 1

         Erlang 增加 Maps数据类型并不是很突然,因为这个提议已经进行了2~3年之久,只不过Joe Armstrong老爷子最近一篇文章Big changes to Erlang掀起不小了风 ...

  5. The Practical Guide to Empathy Maps&colon; 10-Minute User Personas

    That’s where the empathy map comes in. When created correctly, empathy maps serve as the perfect lea ...

  6. Windows 10 新特性 -- Bing Maps 3D地图开发入门&lpar;一&rpar;

    本文主要内容是讲述如何创建基于 Windows Universal App 的Windows 10 3D地图应用,涉及的Windows 10新特性包括 Bing Maps 控件.Compiled da ...

  7. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  10. java&period;lang&period;IllegalArgumentException&colon; Result Maps collection does not contain value for java&period;lang&period;Integer

    今天做springmvc+mybatis+spring的项目的时候发现了一个异常.如下: org.apache.ibatis.builder.IncompleteElementException: C ...

随机推荐

  1. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  2. c&plus;&plus; 字符串函数用法举例

    1. substr() 2. replace() 例子:split() 字符串切割: substr 函数原型: , size_t n = npos ) const; 解释:抽取字符串中从pos(默认为 ...

  3. 对Spring&period;Net的AOP一些思考及应用

    前言      这几天在配置Spring.NET,配到AOP的时候发现自己现在还是没有理解到Spring AOP的实现,只是认识到了一个思想,以前配的时候,看的是给好的例子用,真正用的时候还是要想一下 ...

  4. rails 调试

    1. ruby-debug, ruby-debug19 没人维护,bug多.Ruby 1.9.3后不推荐使用 2. debugger ruby 1.9.3后的选择,功能强大,缺点是没有语法高亮. 项目 ...

  5. ANDROID&lowbar;MARS学习笔记&lowbar;S01&lowbar;003layout初步

    一.layout介绍 二.测试linear_layout1.activity_main.xml <?xml version="1.0" encoding="utf- ...

  6. 04&lowbar;过滤器Filter&lowbar;04&lowbar;Filter生命周期

    [Filter生命周期] [init(FilterConfig filterConfig) throws ServletException] *和Servlet程序类似,Filter的创建和销毁由we ...

  7. 简单的web三层架构系统【第四版】

    上一次写了第三版, 因为之前无意之间看到一段视频,说是把系统中所有的SQL语句都做成存储过程.可以在很大程度上优化系统的SQL执行速度.所以百度了一下细节问题,之后我把所有的SQL语句,都做成了存储过 ...

  8. IM 融云 之 初始化及登录

    融云是没有用户体系的,用户登录需要获取token,测试时可以使用网站提供的接口,但是正式是要通过服务器调用专门的接口从融云获取的.并且我没看到融云的重连机制,不知道是否已在SDK内部实现. 现在看来, ...

  9. FUJI 富士 富仕 串口 N500I N700I 连接

    本人丰富的硬件连接经验, 1.出售富士生化设备N500I, N700I 接入,C#代码demo,  可连接机器验证,验证后付款2. 提供宠物行业富士生化设备N500I, N700I型号接入软件技术支持 ...

  10. Brainfuck反汇编-高级版&lpar;Python&rpar;

    import re def sym2cal(s): if '>' in s: return len(s) else: return -len(s) def cal(s): if '+' in s ...

相关文章