概述：
本文讲述在openlayers中如何实现多图联动。
思路：
1、判断鼠标在哪个地图上；
2、添加该地图的地图移动事件；
3、设置另外一个地图的bound为该地图的。
代码：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>openlayers map</title><link rel="stylesheet" href="" type="text/css"><style>html, body, table{padding:0;margin:0;height:100%;width:100%;overflow: hidden;}#map1,#map2{width: 100%;height: 100%;}</style><script src=""></script><script src=""></script><script src=""></script><script>var map1,map2;$(window).load(function() {var bounds = new OpenLayers.Bounds(73.45100463562233, 18.16324718764174,134.97679764650596, 53.531943152223576);var options = {controls: [],maxExtent: bounds,maxResolution: 0.2403351289487642,projection: "EPSG:4326",units: 'degrees'};map1 = new OpenLayers.Map('map1', options);map2 = new OpenLayers.Map('map2', options);map1.addLayer(getWms("china"));map1.addControl(new OpenLayers.Control.Zoom());map1.addControl(new OpenLayers.Control.Navigation());map1.zoomToExtent(bounds);map2.addLayer(getWms("province"));map2.addControl(new OpenLayers.Control.Zoom());map2.addControl(new OpenLayers.Control.Navigation());map2.zoomToExtent(bounds)$("table").on("mousemove", function(e){var _x = e.clientX;var _tabWidth = $("table").width();if(_x>0 && _x<_tabWidth/2){map1.events.register("move",map1,function(){map2.zoomToExtent(map1.getExtent());});}else{map2.events.register("move",map2,function(){map1.zoomToExtent(map2.getExtent());});}})});function getWms(layer){return new OpenLayers.Layer.WMS("Geoserver layers – Tiled",":8081/geoserver/lzugis/wms",{"LAYERS": layer,"STYLES": '',format: 'image/png'},{buffer: 0,displayOutsideMaxExtent: true,isBaseLayer: true,yx : {'EPSG:4326' : true}});}</script></head><body><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td style="width: 50%; height: 100%; border-right: 1px solid #000;"><div id="map1"></div></td><td style="width: 50%; height: 100%; border-right: 1px solid #000;"><div id="map2"></div></td></tr></table></body></html>
，你必须百分之百的把自己推销给自己。
