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>

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

Android 调用百度地图sdk 实现路线规划导航
Android 调用百度地图sdk 实现路线规划导航功能: 实现实时/需求定位卫星地图查看路况周边poi检索地点输入提示检索驾驶步行公交骑行路线规划注:以上为实现的大概功能 ,接下 ...
android app调用第三方地图路线规划导航（百度，高德，腾讯）
android app调用第三方地图路线规划导航(百度,高德,腾讯) 因为直接使用高德的sdk提供的导航被投诉说不准,所以需要接第三方. 把BAT系的地图都接上了,有兄弟找到其他的地图调用方法告诉下小 ...
uniapp 微信小程序实现路线规划导航
1.引入插件在微信公众平台中找到设置,添加腾讯位置服务路线规划插件 2.引入插件包&授权 1.在项目中找到manifest.json,找到小程序相关配置(mp-weixin)直接复制进去. ...
uniapp 开发安卓App实现高德地图路线规划导航
文章目录技术概述技术详述问题与解决我的总结参考文献技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的 ...
JS简单实现京东图片放大镜效果
效果图: 素材: 大图: 小图: 代码思路: 详见代码注释JS部分代码: <!DOCTYPE html> <html lang="en"><head ...
微信小程序路线规划导航并唤醒第三方导航app
wx.openLocation(Object object) 使用微信内置地图查看位置参数 Object object 属性类型默认值必填说明 latitude number 是纬度, ...
八叉树建立地图并实现路径规划导航
构建语义地图时,用的是 octomap_server和 semantic_slam: octomap_generator,不过还是整理下之前的学习笔记. 一.Octomap 安装并使用Octomap_ ...
简单的基于地理图片的旅行路线还原
在学校时关注基于地理信息的数据挖掘已久,毕业后几无涉足.本文小结当时的一些工作--基于带地理信息的图片的旅行路线还原,也就是通过人们分享的少量图片,还原出用户旅行时的完整的旅行路线.主要方法是先基于H ...
基于定位、地点搜索的驾车路线规划
一个基于高德地图JSAPI开发的移动端示例,模拟了如下场景:通过定位获取用户当前位置,定位成功后可以进行位置微调,定位失败的话可以通过搜索让用户选择当前位置:然后通过搜索让用户选择目的地,在当前位置和 ...

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

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

最新文章

热门文章