<!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. [Erlang 0121] 当我们谈论Erlang Maps时,我们谈论什么 Part 3

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

  3. [Erlang 0117] 当我们谈论Erlang Maps时,我们谈论什么 Part 2

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

  4. [Erlang 0116] 当我们谈论Erlang Maps时,我们谈论什么 Part 1

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

  5. The Practical Guide to Empathy Maps: 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地图开发入门(一)

    本文主要内容是讲述如何创建基于 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.lang.IllegalArgumentException: Result Maps collection does not contain value for java.lang.Integer

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

随机推荐

  1. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  2. hadoop2—namenode—HA原理详解

    在hadoop1中NameNode存在一个单点故障问题,也就是说如果NameNode所在的机器发生故障,那么整个集群就将不可用(hadoop1中有个SecorndaryNameNode,但是它并不是N ...

  3. 命令行工具cmder

    1.下载地址 http://bliker.github.io/cmder/ 分为两个版本:mini版和Full版 2.快捷命令配置: 比如,快速启动canssandra/redis数据库服务和查询工具 ...

  4. sublimeLinter-jshint 配置

    这几天知道sublime3有可以对javascript进行语法检查的文件,折腾了一上午,搞定了. 记录一下步骤: 1.先安装nodejs. 2.npm install jshint -g 3.通过su ...

  5. JavaScript 字符串处理详解【转自：http://www.cnblogs.com/mondLei/p/4096855.html】

    一.创建字符串       创建一个字符串,将一组字符串用引号包起来,将其赋值给一个字符串变量. var JsStr="Hello,JavaScript String!"; 二.字 ...

  6. Linux开机启动程序详解

    Linux开机启动程序详解我们假设大家已经熟悉其它操作系统的引导过程,了解硬件的自检引导步骤,就只从Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤. ...

  7. 代码编译方式 ant +ivy

    Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.由Apache软件基金会所提供. 没用过ant,了解一下,无非就这些功能, 编 ...

  8. python数组的使用

    python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型:(1) list 普通的链表,初始化后可以通过特定方法动态增加元素.定义方式:arr = [元素] (2) ...

  9. MongoDB 数据类型

    MongoDB支持许多数据类型的列表下面给出: String : 这是最常用的数据类型来存储数据.在MongoDB中的字符串必须是有效的UTF-8. Integer : 这种类型是用来存储一个数值.整 ...

  10. rm -rf删除过多文件提示参数过长

    cd /var/tmp/ find . -name "*.log"|xargs rm -rf "*.log"