地图模拟

Peerless_

浏览: 4337 次
性别:

最近访客更多访客>>

fengtaibin

iam_3k

Cobain_LI

THU天马行空

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

html javascript

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/common/jquery-1.8.3.js"></script>
<style type="text/css">
#handle-map {
	position: fixed;
	right: 10px;
	top: 10px;
	z-index: 100;
}
#thump-map{
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	font-size: 0;
	width: 20%;
	height: 20%;
	border: 1px solid blue;
}
#thump-map img{
	width: 100%;
	height: 100%;
}
#radar{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid red;
	box-sizing: border-box;
}
html,body,#container,#wrapper-map,#map-div {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#map-div {
	position: relative;
	overflow: hidden;
}

#map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
<script type="text/javascript">
	{
	var isMouseDown_map = false, isMouseDown_radar = false;;
	var original_pos = {}, old_map_pos = {};
	// 當前縮放比例
	var _rate = 100;
	var $map, $radar;
	// 每次縮放比例
	var _scale = _rate/5;
	// 最大,最小比例
	var _MAX_ = 30*_scale, _MIN_ = 5*_scale;
	var _width, _height;
}
$(function() {
	_width = $('#map-div').width();
	_height = $('#map-div').height();
	$map = $('#map');
	$radar = $('#radar');
	
	$('#hide').click(function(){
		if($(this).val()=='隱藏'){
			$('#thump-map').hide();
			$(this).val('顯示');
		}else{
			$('#thump-map').show();
			$(this).val('隱藏');
		}
	});
	$('#big').click(scaleMap);
	$('#small').click(scaleMap);
	$('#handle-up').click(moveMap);
	$('#handle-down').click(moveMap);
	$('#handle-left').click(moveMap);
	$('#handle-right').click(moveMap);
	
	$map.add($radar).on({
		'mousedown': mouseDown,
		'mouseup': mouseUp
	});
	$map.mousemove(mouseMoveForMap);
	$radar.mousemove(mouseMoveForRadar);
});
{
	// 地圖事件
	function mouseUp(){
		window['isMouseDown_'+this.id] = false;
		$(this).css('cursor', 'default');
		original_pos = {};
		old_map_pos = {};
	}
	function mouseDown(e){
		window['isMouseDown_'+this.id] = true;
		$(this).css('cursor', 'move');
		original_pos.x = e.clientX;
		original_pos.y = e.clientY;
		old_map_pos.x = parseInt($(this).css('left'));
		old_map_pos.y = parseInt($(this).css('top'));
	}
	function mouseMoveForMap(e){
		if (isMouseDown_map) {
			var moveX = e.clientX - original_pos.x;
			var moveY = e.clientY - original_pos.y;
			var left_ = old_map_pos.x + moveX;
			var top_ = old_map_pos.y + moveY;
			if(left_>0){
				left_ = 0;
			}else if(left_<-_width*((_rate-100)/100)){
				left_ = -_width*((_rate-100)/100);
			}
			if(top_>0){
				top_ = 0;
			}else if(top_<-_height*((_rate-100)/100)){
				top_ = -_height*((_rate-100)/100);
			}
			
			$map.css({
				'left' : left_ + 'px',
				'top' : top_ + 'px'
			});
			$radar.css({
				'left' : -left_*(20/_rate) + 'px',
				'top' : -top_*(20/_rate) + 'px'
			});
		}
	}
	function mouseMoveForRadar(e){
		if (isMouseDown_radar) {
			var moveX = e.clientX - original_pos.x;
			var moveY = e.clientY - original_pos.y;
			var left_ = old_map_pos.x + moveX;
			var top_ = old_map_pos.y + moveY;
			var radarWidth = $radar.width();
			var radarHeight = $radar.height();
			if(left_<0){
				left_ = 0;
			}else if(left_>(_width*.2-radarWidth-2)){ // 此處-2為radar的邊框
				left_ = _width*.2-radarWidth-2;
			}
			if(top_<0){
				top_ = 0;
			}else if(top_>(_height*.2-radarHeight-2)){ // 此處-2為radar的邊框
				top_ = _height*.2-radarHeight-2;
			}
			$radar.css({
				'left' : left_ + 'px',
				'top' : top_ + 'px'
			});
			$map.css({
				'left' : -left_/(20/_rate) + 'px',
				'top' : -top_/(20/_rate) + 'px'
			});
		}
	}
	function scaleMap() {
		if ($(this).is('#big')) {
			_rate += _scale;
		} else {
			_rate -= _scale;
			_scale = -Math.abs(_scale);
		}
		if(_rate>_MAX_){
			_rate = _MAX_;
			return;
		}
		if(_rate<_MIN_){
			_rate = _MIN_;
			_scale = Math.abs(_scale);
			return;
		}
		
		var top_ = parseFloat($map.css('top'));
		var left_ = parseFloat($map.css('left'));
		$map.css({
			'width' : _rate + '%',
			'height' : _rate + '%',
			'left' : (left_ - _scale / 100 / 2 * _width) + 'px',
			'top' : (top_ - _scale / 100 / 2 * _height) + 'px'
		});
		$radar.css({
			'width' : 10000/_rate + '%',
			'height' : 10000/_rate + '%',
			'left' : -(left_ - _scale / 100 / 2 * _width)*(20/_rate) + 'px', // 此處20為小圖占大圖的比例
			'top' : -(top_ - _scale / 100 / 2 * _height)*(20/_rate) + 'px'
		});
		_scale = Math.abs(_scale);
	}
	function moveMap() {

		var direction = this.id;
		var top_ = parseInt($map.css('top'));
		var left_ = parseInt($map.css('left'));
		switch (direction) {
		case 'handle-up':
			top_ = top_ - 20;
			break;
		case 'handle-down':
			top_ = top_ + 20;
			break;
		case 'handle-left':
			left_ = left_ - 20;
			break;
		case 'handle-right':
			left_ = left_ + 20;
			break;

		}
		if(left_>0){
			left_ = 0;
		}else if(left_<-_width*((_rate-100)/100)){
			left_ = -_width*((_rate-100)/100);
		}
		if(top_>0){
			top_ = 0;
		}else if(top_<-_height*((_rate-100)/100)){
			top_ = -_height*((_rate-100)/100);
		}
		$map.css({
			'top': top_ + 'px',
			'left': left_ + 'px'
		});
		$radar.css({
			'top': -top_*(20/_rate) + 'px',
			'left': -left_*(20/_rate) + 'px'
		});
	}
}
</script>
</head>
<body>
	<div id="container">
		<div id="wrapper-map">
			<div id="thump-map">
				<img src="thumb_map.jpg">
				<div id="radar"></div>
			</div>
			<div id="handle-map">
				<input type="button" id="hide" value="隱藏">
				<input type="button" id="big" value="放大">
				<input type="button" id="small" value="縮小">
				<br>
				<input type="button" id="handle-up" value="上">
				<input type="button" id="handle-down" value="下">
				<input type="button" id="handle-left" value="左">
				<input type="button" id="handle-right" value="右">
			</div>
			<div id="map-div">
				<img src="map.jpg" id="map" draggable="false" usemap="#factoryInfo">
				<map name="factoryInfo" id="factoryInfo">
					<area shape="poly" coords="200,0,300,0,300,150,200,150" href="javascript: alert()"/>
				</map>
			</div>

		</div>
	</div>
	
</body>
</html>

分享到：