<!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. Android去除CPU占用过高时屏幕四周闪红框

    话说有些时间没有更新博客了,今天正好解决这个问题,顺便把它记录下来.. 今天遇到的情况是这样的,当CPU占用过高时,屏幕四周会出现一个红框. 闪一次两次算了,但是挺萌的(TMD)不停的闪,我的钛合金狗 ...

  2. iframe 父子窗口相互之间调用语法

    一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></i ...

  3. 微软CRM解决医药企业串货之痛

    没有准确.及时的流向数据统计和分析,医药企业营销部门就无法有效管理串货泛滥问题,串货会造成渠道无利可赚,挫伤渠道的积极性,产品无人愿意卖,最终伤害的还是医药企业. 医药企业营销发展的不同阶段对串货的态 ...

  4. linux rm 命令

    1.命令格式: rm [选项] 文件… 2.命令功能: 删除一个目录中的一个或多个文件或目录,如果没有使用- r选项,则rm不会删除目录.如果使用 rm 来删除文件,通常仍可以将该文件恢复原状. 3. ...

  5. Media Player（APP）

    今天共享一下,以前做的影音播放器.比较简单.适合新手. 我上传了附件可以参考一下. PDF:http://files.cnblogs.com/files/hongguang-kim/MediaPlay ...

  6. hdu 2141 Can you find it?

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2141 Can you find it? Description Give you three sequ ...

  7. microsoft azure 速度测试网址

    http://www.azurespeed.com/ 选择你附近的区域.可以使用 azurespeed.com 查找延迟最低的数据中心.

  8. df du

    df命令详细用法 a:显示全部的档案系统和各分割区的磁盘使用情形 i:显示i -nodes的使用量 k:大小用k来表示 (默认值) t:显示某一个档案系统的所有分割区磁盘使用量 x:显示不是某一个档案 ...

  9. Javascript是一个事件驱动语言

    面向原型这种说法我没在网上找到

  10. centos6.3编译安装Apache2.4.3+PHP5.4.8+Mysql5.5.8

    以虚拟机VirtualBox 版本是4.1.20(内存设置为512M,centos安装是文本模式下安装),全新以最小化包安装了32位的 CentOS6.3系统,作为本地web环境,上次讲了在windo ...