<!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. linux内核SPI总线驱动分析（二）(转)

    简而言之,SPI驱动的编写分为: 1.spi_device就构建并注册  在板文件中添加spi_board_info,并在板文件的init函数中调用spi_register_board_info(s3 ...

  2. Sublime Text 2编译python时出错

    [Error 2] The system cannot find the file specified [Finished]   解决方法: 1.环境变量path添加: C:\Python32\Too ...

  3. 在Ubuntu下设置环境变量

    在Ubuntu中有如下几个文件可以设置环境变量 /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. /e ...

  4. rails中ActionController::InvalidAuthenticityToken解决办法

    Ror代码 class FooController < ApplicationController protect_from_forgery :except => :index # you ...

  5. tomcat生成ssl证书

    转载:http://www.cnblogs.com/sixiweb/p/3339698.html 1.1 生成keystore文件及导出证书 打开控制台: 运行: %JAVA_HOME%\bin\ke ...

  6. Redis客户端之Spring整合Jedis

      1.下载相关jar包,并引入工程: jedis-2.4.2.jar commons-pool2-2.0.jar 2.将以下XML配置引入spring <bean id="shard ...

  7. C基础 那些年用过的奇巧淫技

    引言 - 为寻一颗明星 为要寻一颗明星 徐志摩 1924年12月1日<晨报六周年纪念增刊> 我骑著一匹拐腿的瞎马, 向著黑夜里加鞭:—— 向著黑夜里加鞭, 我跨著一匹拐腿的瞎马.// 我冲 ...

  8. NOJ1018-深度遍历二叉树

    题目要求很简单,前中后序遍历一棵二叉树.坑爹的是这道题的输入数据和测试数据压根不一样,找了好久原因,去讨论区看见有别人发的测试样例,修改了一下就AC了 测试样例是这个:DEH##FJ##G#CK### ...

  9. Linux环境PostgreSQL源码编译安装

    Linux环境PostgreSQL源码编译安装 Linux版本: Red Hat 6.4 PostgreSQL版本: postgresql-9.3.2.tar.gz 数据存放目录: /var/post ...

  10. Stream,Reader/Writer,Buffered的区别（2）

    Reader: Reader的子类: 1.BufferedReader: FileReader 没有提供读取文本行的功能,BufferedReader能够指定缓冲区大小,包装了read方法高效读取字符 ...