我希望我能告诉你一个问题,并希望有任何方法可以解决这个问题。
Click me if you want to see the map
如何使用?在左角设置一个标记并将其放入地图中。单击Numpad +键增加或 - 减少地图。 (MaxZoomLevel 8)
所有标记都是img,并将附加在该框中。
<div id="MarkerBox"></div>
这是标记的样子:
<img id="Marker_0" src="images/gelb.png" alt="Map Marker" style="top: 417px; left: 745px; position: absolute;">
zoom.js
地图放大后,此功能会将所有标记移动到新位置。这可能是错误。
var markersScallingUp = function()
{
$("#MarkerBox img").each(function(){
$(this).css("top", $(this).offset().top * 1.2);
$(this).css("left", $(this).offset().left * 1.2);
});
}
同样的做法是减少标记的位置:(可能缩放不是i“moveMarkerPosition”更好的最佳名称)
var markersScallingDown = function()
{
$("#MarkerBox img").each(function(){
$(this).css("top", $(this).offset().top / 1.2);
$(this).css("left", $(this).offset().left / 1.2);
});
}
更改地图大小并使用功能进行缩放:
var currentZoomLevel = 0;
var mapWidth = $("#map").width();
var mapHeight = $("#map").height();
$(document).keydown(function(e){
switch(e.which)
{
case 107:
if(currentZoomLevel <= 8){
$("#map").focus();
$("#map").width(mapWidth * 1.2);
$("#map").height(mapHeight * 1.2);
markersScallingUp();
mapWidth = $("#map").width();
mapHeight = $("#map").height();
currentZoomLevel++;
}
break;
case 109:
if(currentZoomLevel >= 1){
$("#map").focus();
$("#map").width(mapWidth / 1.2);
$("#map").height(mapHeight / 1.2);
mapWidth = $("#map").width();
mapHeight = $("#map").height();
markersScallingDown();
currentZoomLevel--;
}
break;
}
});
在下图中,我们看到缩放的人,标记与用户存放的位置不完全相同。变焦越大,距离实际目标的标记越远。我很高兴每一个奖励!
目前,您正在maparea中扩展地图图像,然后使用像素进行一些手动缩放。
我将图像设置为'mapareaid'的背景,并使用百分比代替标记的像素。对于缩放,更简单的方法是使用缩放css函数来缩放地图和标记。
HTML
<!DOCTYPE html>
<!-- saved from url=(0036)http://www.webdesign-host.ch/thomas/ -->
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./CustomMap (GTA5)_files/jquery.min.js.download"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CustomMap (GTA5)</title>
<link rel="stylesheet" type="text/css" href="./CustomMap (GTA5)_files/index.css">
<script src="./CustomMap (GTA5)_files/zoom.js.download"></script>
<script src="./CustomMap (GTA5)_files/setmarker.js.download"></script>
<script src="./CustomMap (GTA5)_files/jquery.elevatezoom.js.download"></script>
</head>
<body cz-shortcut-listen="true">
<div class="menu" id="menu">
<img id="btn1" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/gruen.png"> <img id="btn2" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/blau.png"> <img id="btn3" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/rot.png"> <img id="btn4" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/gelb.png">
</div>
<div class="container">
<div id="mapareaid" class="maparea">
<!--<img id="map" class="map" style="width: 4833.54px; height: 2310.94px;" src="./CustomMap (GTA5)_files/map.jpg" alt="Dies ist eine gigantische Map von GTA V. Schade, dass du das nicht sehen kannst.">-->
<div id="MarkerBox"></div>
<div id="InfoBox">
</div>
</div>
<!-- Marker Stuff -->
<div id="InfoBox">
<div class="infoContainer" style="visibility: hidden; display: none; top: 0px; left: 0px;">
<div class="strukturContainer">
<div class="infotitel"><h1>Titel</h1></div>
<div class="bildcontainer">
<div class="infobild"></div>
<div class="infobild"></div>
<div class="infobild"></div>
</div>
<div class="infobeschreibung">
<textarea>Gib mir eine informative Information.</textarea>
</div>
</div>
</div>
</div>
<!-- Template to generate InfoBox content -->
<div class="templateinfobox" style="visibility: hidden;">
<div class="infoContainer">
<div class="strukturContainer">
<div class="infotitel"><h1>Titel</h1></div>
<div class="bildcontainer">
<div class="infobild"></div>
<div class="infobild"></div>
<div class="infobild"></div>
</div>
<div class="infobeschreibung">
<textarea>Gib mir eine informative Information.</textarea>
</div>
</div>
</div>
</div>
<div class="werkzeugkiste" style="visibility: hidden;">
<div class="werkzeugContainer">
<div class="werkzeug1"></div>
<div class="werkzeug2"></div>
</div>
</div>
</body></html>
css
*
{
margin: 0;
padding: 0;
}
.container
{
float: left;
width: 1365px;
}
.maparea
{
float: left;
width: auto;
height: auto;
overflow: hidden;
}
.map
{
height: auto;
}
.menu
{
width: 100%;
height: 75px;
position: fixed;
background-color: white;
border: 2px solid blue;
border-left: 0;
border-right: 0;
margin: 0 auto;
z-index: 100;
}
.menubuttons
{
float: left;
margin-left: 55px;
margin-top: 10px;
}
.infoContainer
{
position: absolute;
width: 350px;
z-index: 1;
display: none;
}
.strukturContainer
{
float: left;
width: 350px;
z-index: 1;
}
.infotitel
{
float: left;
width: 346px;
height: 50px;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: yellow;
text-align: center;
z-index: 1;
}
.bildcontainer
{
float: left;
width: 346px;
height: 100px;
background-color: red;
border-left: 2px solid black;
border-right: 2px solid black;
z-index: 1;
}
.infobild
{
float: left;
width: 33%;
height: 100%;
z-index: 1;
}
.infobeschreibung
{
width: 346px;
height: 300px;
float: left;
background-color: green;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
z-index: 1;
}
textarea
{
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
z-index: 1;
}
#mapareaid{
background: url('map.jpg');
background-size:100%;
width: 2000px;
height: 2000px;
position: relative;
}
#MarkerBox{
width: 100%;
height: 100%;
}
setmarker.js
$(document).ready( function() {
var halfMarkerSize = 15;
var currentSelection = 0;
var pictureArray = ["default.png", "gruen.png", "blau.png", "rot.png", "gelb.png"];
var currentMousePos = { x: -1, y: -1 };
var currentScrollPos = 0;
var markerCountID = 0;
var markerID = null;
var x = -1;
var y = -1;
var markerBindClick = function()
{
$("#MarkerBox img").each(function(){
$(this).off("mousedown").on("mousedown", function(e){
switch(e.which)
{
case 1:
//Left Mouse button pressed.
x = currentMousePos.x + 15;
y = currentMousePos.y - 5;
markerID = e.target.id.replace('Marker_', '');
HideInfoBox();
ShowInfoBox();
break;
case 2:
//Middle Mouse button pressed.;
break;
case 3:
//Right Mouse button pressed.
break;
}
});
/*$(this).off("click").on("click", function(e){
x = currentMousePos.x + 15;
y = currentMousePos.y - 5;
markerID = e.target.id.replace('Marker_', '');
HideInfoBox();
ShowInfoBox();
});*/
});
}
var HideInfoBox = function()
{
$('#InfoBox .infoContainer').each(function(){
//alert($(this).attr("class"));
$(this).css("visibility", "hidden");
$(this).css("display", "none");
});
}
var truncateDecimals = function (number, digits) {
var multiplier = Math.pow(10, digits),
adjustedNum = number * multiplier,
truncatedNum = Math[adjustedNum < 0 ? 'ceil' : 'floor'](adjustedNum);
return truncatedNum / multiplier;
};
var ShowInfoBox = function()
{
var count = 0;
$('#InfoBox .infoContainer').each(function(){
//alert($(this).attr("class"));
if(markerID == count)
{
$(this).css("visibility", "visible");
$(this).css("top", y - 5);
$(this).css("left", x + 15);
$(this).css("display", "block");
//style: 'top: '+y+'px;'+' left: '+x+'px; position: absolute;'
}
count++;
if(markerID >= count){ return; }
});
}
//Loading directly...
$("#menu img").each(function(){
//alert("TEST");
$(this).on("click", function(){
//alert("TEST");
if($(this).attr("id") == "btn1")
{
currentSelection = 1;
}else if($(this).attr("id") == "btn2")
{
currentSelection = 2;
}else if($(this).attr("id") == "btn3")
{
currentSelection = 3;
}else if($(this).attr("id") == "btn4")
{
currentSelection = 4;
}
});
});
//WHY NOOOOO WOOOORKK????
/*$( "#Marker_0" ).click(function(e) {
alert( "Handler for .click() called." );
});*/
//Bei jeder Mousebewegung speichern wir den aktuellen ort ab.
$("#mapareaid").on( "mousemove", function( e ) {
currentMousePos.x = e.pageX;
currentMousePos.y = e.pageY;
//console.log(currentMousePos.x);
});
/*$('#map').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});*/
//Hier generieren wir ein neues img Tag und fügen es zu unserer MarkerBox hinzu.
//Aufgaben: Die ID muss dringend einzigartig gestaltet werden. (Diese Änderung beinflust die positionierung nicht)
// ^ sollte funktionieren
$("#mapareaid").click(function(e){
if(currentSelection != 0)
{
x = currentMousePos.x - halfMarkerSize;
y = currentMousePos.y - halfMarkerSize;
xPerc = x / $('#mapareaid').width() * 100;
yPerc = y / $('#mapareaid').height() * 100;
var img = $('<img />', {
id: 'Marker_'+markerCountID+'',
src: 'images/'+pictureArray[currentSelection]+'',
alt: 'Map Marker',
style: 'top: '+truncateDecimals(yPerc,1)+'%;'+' left: '+truncateDecimals(xPerc,1)+'%; position: absolute;'
});
img.appendTo($('#MarkerBox'));
markerCountID++;
currentSelection = 0;
markerBindClick();
$('#InfoBox').append($('.templateinfobox').html());
}
if(currentSelection == 0)
{
HideInfoBox();
}
});
});
zoom.js
$(document).ready( function() {
var currentZoomLevel = 0;
var scaleRatio = 1.2;
var scaleDownRatio = 5/6;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
//Set the default map width to window.size
$("#mapareaid").width(windowWidth);
$("#mapareaid").height(windowHeight);
//Set resize function...
$(window).resize(function(){
windowWidth = $(window).width();
windowHeight = $(window).height();
});
//Set the current mapWidth/Height
var mapWidth = $("#mapareaid").width();
var mapHeight = $("#mapareaid").height();
//Es gibt verschiedene möglichkeiten um eigene funktionen zu deklarieren in JQuery sowie JS.
var markersScallingUp = function()
{
$("#MarkerBox img").each(function(){
//$(this).css("transform", "scale(" + scaleMarkers+ ")" );
//$(this).css("transform", "scale(" + scaleRatio * (currentZoomLevel + 1)+ ")" );
$(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel + 1)+ ")" );
//$(this).css("top", $(this).offset().top * 1.2);
//$(this).css("left", $(this).offset().left * 1.2);
});
}
var markersScallingDown = function()
{
$("#MarkerBox img").each(function(){
//$(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel + 1)+ ")" );
$(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel)+ ")" );
//$(this).css("top", $(this).offset().top / 1.2);
//$(this).css("left", $(this).offset().left / 1.2);
});
}
var infoScallingUp = function()
{
$("#InfoBox .infoContainer").each(function(){
$(this).css("top", $(this).offset().top * 1.2);
$(this).css("left", $(this).offset().left * 1.2);
});
}
var infoScallingDown = function()
{
$("#InfoBox .infoContainer").each(function(){
$(this).css("top", $(this).offset().top / 1.2);
$(this).css("left", $(this).offset().left / 1.2);
});
}
$(document).keydown(function(e){
switch(e.which)
{
case 107:
/*$('#map').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
}); */
if(currentZoomLevel <= 8){
$("#mapareaid").focus();
//$("#map").width(mapWidth * 1.2);
//$("#map").height(mapHeight * 1.2);
//scaleMap *= 1.2 * (currentZoomLevel + 1)
//scaleMarkers /= 1.2 * (currentZoomLevel + 1)
$("#mapareaid").css("transform", "scale(" + scaleRatio * (currentZoomLevel + 1)+ ")" );
//alert(differenceX);
//alert(differenceX);
markersScallingUp();
//infoScallingUp();
//mapWidth = $("#mapareaid").width();
//mapHeight = $("#mapareaid").height();
//$(window).scrollTop($(window).scrollTop()+100);
//$(window).scrollLeft($(window).scrollLeft()+(60 * currentZoomLevel));
currentZoomLevel++;
}
break;
case 109:
if(currentZoomLevel >= 1){
$("#mapareaid").focus();
//$("#mapareaid").css("width", mapWidth / 1.2);
//$("#mapareaid").css("height", mapHeight / 1.2);
//$("#map").width(mapWidth / 1.2);
//$("#map").height(mapHeight / 1.2);
//mapWidth = $("#mapareaid").width();
//mapHeight = $("#mapareaid").height();
//scaleMap /= 1.2 * (currentZoomLevel + 1)
//scaleMarkers *= 1.2 * (currentZoomLevel + 1)
$("#mapareaid").css("transform", "scale(" + scaleRatio * (currentZoomLevel)+ ")" );
markersScallingDown();
infoScallingDown();
//$(window).scrollTop($(window).scrollTop()-100);
//$(window).scrollLeft($(window).scrollLeft()-(60 * currentZoomLevel));
currentZoomLevel--;
}
break;
}
});
});