js简单实现基于图片的路线规划导航

最新推荐文章于 2024-06-08 10:01:04 发布
kenhins
最新推荐文章于 2024-06-08 10:01:04 发布
阅读量3.5k
点赞数 1
分类专栏： Javascript
本文链接：https://blog.csdn.net/kenhins/article/details/79032536
版权
Javascript 专栏收录该内容
62 篇文章 1 订阅
订阅专栏
js简单实现基于图片的路线规划导航
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>楼层指引</title>
	<link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>
	<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

	<link href="${ctxStatic}/modules/front/zhiyin/css/tooltip.css?s=1" rel="stylesheet">
	<script src="${ctxStatic}/modules/front/zhiyin/js/cvi_map_lib.js?s=1"></script>
	<script src="${ctxStatic}/modules/front/zhiyin/js/wz_jsgraphics.js?s=1"></script>
	<script src="${ctxStatic}/modules/front/zhiyin/js/maputil.js?s=1"></script>
	<script src="${ctxStatic}/modules/front/zhiyin/js/mapper.js?s=1"></script>


	<style>
		body{
			background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg');
			background-repeat:no-repeat;
			background-position-x: center;
			background-position-y: center;
			background-size: 100% 100%;
			background-attachment:fixed;
			-moz-background-size: 100% 100%;
		}
		.page-content{
			min-height: 768px;
		}
		.page-header{
			border-bottom:0px !important;
		}
		.page-header h1{
			color:#fff;
		}


		.img-div{
			text-align: center;
		}
		.img-bg{
			position: relative;
			display: inline-block;
			width:1200px;
			height:586px;
		}
		.position-1{
			position: absolute;
			bottom: 68px;
			left: 124px;
			float: left;
			display:none;
		}
		.position-2{
			position: absolute;
			bottom: 110px;
			left: 124px;
			float: left;
			display:none;
		}
		.position-3{
			position: absolute;
			bottom: 35px;
			left: 708px;
			float: left;
			display:none;
		}
		.position-4{
			position: absolute;
			bottom: 68px;
			left: 682px;
			float: left;
			display:none;
		}
		.position-5{
			position: absolute;
			bottom: 40px;
			left: 270px;
			float: left;
			display:none;
		}
		div#planetmap_blind, div.blind_area {
			background: transparent;
			text-align: left;
			vertical-align: bottom;
			margin: 0; padding: 0;
		}





	</style>
</head>

<body>
	<div class="main-content">
		<div class="page-content">
			<a id="fanhui" οnclick="javascript :history.go(-1);" class="pull-left btn btn-lg btn-info" style="" >返回</a>
			<div class="page-header">
				<h1 class="text-center">楼层指引</h1>
			</div>
			<div class="row row-from">
				<div class="img-div col-xs-12">
					<div class="img-bg">
						<img id="zhiyin-bg1" class="mapper showcoords noborder iopacity30 icolorff0000" border='0' usemap="#planetmap" src="${ctxStatic}/modules/front/zhiyin/image/bg2.png" >

						<map name='planetmap' id='planetmap'>
							<area id="area01" shape='rect' coords='24,105,127,265' class="icolor00ff00" tooltip="网上咨询1" οnmοuseοver="cvi_tip._show(event);" οnmοuseοut="cvi_tip._hide(event);" οnmοusemοve="cvi_tip._move(event);" href="javascript:getPosition02(this);" alt='' />
							<area id="area02" shape='rect' coords='24,269,127,439' class="icolor00ff00" tooltip="网上咨询2" οnmοuseοver="cvi_tip._show(event);" οnmοuseοut="cvi_tip._hide(event);" οnmοusemοve="cvi_tip._move(event);" href="javascript:getPosition01(this);" alt='' />
							<area id="area03" shape='rect' coords='25,442,150,565' class="icolor00ff00" tooltip="洗手间" οnmοuseοver="cvi_tip._show(event);" οnmοuseοut="cvi_tip._hide(event);" οnmοusemοve="cvi_tip._move(event);" href="javascript:getPosition05(this);" alt='' />
							<area id="area04" shape='rect' coords='1076,108,1170,466' class="icolor00ff00" tooltip="网上自助立案" οnmοuseοver="cvi_tip._show(event);" οnmοuseοut="cvi_tip._hide(event);" οnmοusemοve="cvi_tip._move(event);" href="javascript:getPosition04(this);" alt='' />
							<area id="area05" shape='rect' coords='1027,471,1173,563' class="icolor00ff00" tooltip="咨询室" οnmοuseοver="cvi_tip._show(event);" οnmοuseοut="cvi_tip._hide(event);" οnmοusemοve="cvi_tip._move(event);" href="javascript:getPosition03(this);" alt='' />
							<area id="area06" shape='rect' coords='545,485,575,514' tooltip="你在此处" href='javascript:void(0);' alt='' />
						</map>



						<div class="position-1">
							<img src="${ctxStatic}/modules/front/zhiyin/image/wszx1.png" />
						</div>
						<div class="position-2">
							<img class="img-responsive center-block" src="${ctxStatic}/modules/front/zhiyin/image/wszx2.png" />
						</div>
						<div class="position-3">
							<img class="img-responsive center-block" src="${ctxStatic}/modules/front/zhiyin/image/zhixunshi.png" />
						</div>
						<div class="position-4">
							<img class="img-responsive center-block" src="${ctxStatic}/modules/front/zhiyin/image/wszz.png" />
						</div>
						<div class="position-5">
							<img class="img-responsive center-block" src="${ctxStatic}/modules/front/zhiyin/image/wc.png" />
						</div>
						<%--<div class="position-6"></div>--%>
						<%--<div class="position-7"></div>--%>
						<%--<div class="position-8"></div>--%>
						<%--<div class="position-9"></div>--%>

					</div>








					<!-- area -->


				</div>
			</div>
		</div>

		<!-- 定位  -->
		<%--<div id="cvi_tooltip_0" style="visibility: visible; position: absolute; display: block; opacity: 1; left: 620px; top: 559px;">你在此处</div>--%>
		<div id="cvi_tooltip_1" class="tooltip_md" style="opacity: 1;"><img src="${ctxStatic}/modules/front/zhiyin/image/end_marker.png" /></div>

	</div><!-- /.main-content -->
</body>
</html>



<script>

	var steepMap = 1000;
	var xx;
	var yy;
	$(document).mousemove(function(e) {
//		xx = e.originalEvent.x || e.originalEvent.layerX || 0;
//		yy = e.originalEvent.y || e.originalEvent.layerY || 0;
		var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
		xx = e.pageX || e.clientX + scrollX;
		yy = e.pageY || e.clientY + scrollY;

	});

	$(document).ready(function(){

	});

	function getPosition01(obj){
		$(".position-1").show(steepMap);
		$(".position-2").hide();
		$(".position-3").hide();
		$(".position-4").hide();
		$(".position-5").hide();
		//标记
		$(".tooltip_md").css({
			'visibility':'visible',
			'position': 'absolute',
			'display': 'block',
			'opacity': '1',
			'left': xx,
			'top': yy
		});
	}

	function getPosition02(obj){
		console.log(obj);
		$(".position-2").show(steepMap);
		$(".position-1").hide();
		$(".position-3").hide();
		$(".position-4").hide();
		$(".position-5").hide();


		//标记
		$(".tooltip_md").css({
			'visibility':'visible',
			'position': 'absolute',
			'display': 'block',
			'opacity': '1',
			'left': xx,
			'top': yy
		});
	}

	function getPosition03(obj){
		$(".position-3").show(steepMap);
		$(".position-1").hide();
		$(".position-2").hide();
		$(".position-4").hide();
		$(".position-5").hide();
		//标记
		$(".tooltip_md").css({
			'visibility':'visible',
			'position': 'absolute',
			'display': 'block',
			'opacity': '1',
			'left': xx,
			'top': yy
		});
	}

	function getPosition04(obj){
		$(".position-4").show(steepMap);
		$(".position-1").hide();
		$(".position-2").hide();
		$(".position-3").hide();
		$(".position-5").hide();
		//标记
		$(".tooltip_md").css({
			'visibility':'visible',
			'position': 'absolute',
			'display': 'block',
			'opacity': '1',
			'left': xx,
			'top': yy
		});
	}

	function getPosition05(obj){
		$(".position-5").show(steepMap);
		$(".position-1").hide();
		$(".position-2").hide();
		$(".position-3").hide();
		$(".position-4").hide();
		//标记
		$(".tooltip_md").css({
			'visibility':'visible',
			'position': 'absolute',
			'display': 'block',
			'opacity': '1',
			'left': xx,
			'top': yy
		});
	}

	$('body').click(function(e) {
		if(e.target.id != 'area01' && e.target.id != 'area02' && e.target.id != 'area03' && e.target.id != 'area04' && e.target.id != 'area05'){
			$(".position-1").hide();
			$(".position-2").hide();
			$(".position-3").hide();
			$(".position-4").hide();
			$(".position-5").hide();
			$("#zhiyin-bg1_canvas").css("background-color","");
			$(".tooltip_md").css({
				'visibility':'visible',
				'position': 'absolute',
				'display': 'none',
				'opacity': '0'
			});
		}
	});

//	function showCoords(map,area,x,y,w,h) {
//		function parseDMS(v,n){var d,m,s; d=parseInt(v); m=Math.abs(parseFloat(v-d)*60); s=Math.abs(parseFloat(parseInt(m)-m)*60); return Math.abs(d)+"° "+parseInt(m)+"' "+parseInt(s)+"'' "+n;}
//		if(map=="planetmap") {
//			var obj, country = "", lon = (x*360/w)-180, lat = 90-(y*180/h);
//			lon = parseDMS(lon,lon!=0?(lon<0?"W":"E"):""); lat = parseDMS(lat,lat!=0?(lat<0?"S":"N"):"");
//			if(area!=0) {obj = document.getElementById(area); country = "  ("+(obj.title||obj.alt)+")";}
//			document.getElementById("planetmap_blind").innerHTML = "<p class='coords'>Latitude: "+lat+"  Longitude: "+lon+country+"<\/p>";
//		}
//	}


	if(document.getElementsByName('planetmap')){
		var _areas=document.getElementsByTagName('area');
		for(j=0;j<_areas.length;j++){
			//alert(_areas[j]);
			(function (i) {
				_areas[i].onclick = function() {
//					console.log(_areas[i]);
//					var image_id = document.getElementById("zhiyin-bg1");
//					var area_id = document.getElementById("area01");
//					setAreaOver(this,'zhiyin-bg1_canvas','0,0,255','255,0,0','0.3',1,0,0);
//					$("#zhiyin-bg1_canvas").css("background-color","#11101080")//遮罩层
//					$(".main-content").css("background-color","#11101080")
				}
			})(j);
		}
	}


</script>