marker setzen auf eine karte

Christopher25

Na ich müsste doch mit

Code

var offsetLeft;
			var offsetTop;
			$("#map").click(function (e) {
				e.preventDefault();
				var parentOffset = $(this).position();
				offsetLeft = e.offsetX + parentOffset.left-12;
				offsetTop = e.offsetY + parentOffset.top-25;
				openModal(offsetLeft, offsetTop);
			});




var $modal = $("#modal");
            var clickState;
            function openModal(x, y) {
                clickState = false;
                $modal.children("input").val("");
                $modal.children("textarea").val("");
                $modal.css({
                    left: x,
                    top: y
                });
                $modal.show();
                return true;
            }

Alles anzeigen

den sichtbar machen oder nicht?

explanator

Ja. Die Methode show() blendet das Element ein.

Christopher25

und warum funktioniert das nicht?

explanator

Das kann dir niemand sagen, da wir ja nur eine Seite als Ergebnis sehen und nicht wissen wie die Scripte und das Login aussehen.

Christopher25

das Login funktioniert alles, die variablen der Session etc werden korrekt gesetzt, weil ich mich anmelden kann und die denentsprechenden Pins für angemeldete User ja sehen kann.

Hier nochmal der jetzige code

PHP

<?php include('login.php'); ?>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
	<title>TreWa Map - Cyrodiil</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<link href="KarteCSS.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="banner">
		<a href="http://teso.trewa.net/"><img src="logo.gif" width="300" height="200" alt="logo"></a>
		</div>
		<?php
		if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
			echo "<div id='login'><h2>Willkommen <u>".$_SESSION['username']."</u></h2><br>";
			echo '<form method="POST" action="logout.php" width="20">
			<b>Logout:</b><br><button>Ausloggen</button>
			</form></div>';
		}
		?>
		<div id="mapContainer">
		<?php
			if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
			if($_SESSION['isAdmin'] == true) {
				echo '<img id="map" alt="" src="Cyrodiil.jpg" width="1250" height="1000" style="z-index:2; cursor:pointer;">';
			} else {
				echo '<img id="map" alt="" src="Cyrodiil.jpg" width="1250" height="1000" style="z-index:2;">';
			}} else {
				echo '<img id="map" alt="" src="Cyrodiil.jpg" width="1250" height="1000" style="z-index:2;">';
			}
			// Kartenvariable anlegen zum übergreifen auf den Loadprozess
			include('mapName.php');
			$mapName ="Cyrodiil";
			// Aufrufen des Datenbankzugriffs um die Marker zu laden
			include('loadmarker.php');
		?>
		<button id="buttonsidebar" style="z-index:2;"><b> |> </b></button>
		<div id="modal" style="z-index:1;">
			<span class="delete">X</span>
			<input type="text" name="title" placeholder="Titel..">
			Nur fuer Mitglieder sichtbar?
			<select id="memberchoise">
				<option value="true">ja</option>
				<option value="false">nein</option>
			</select>
			<input type="text" name="youtube" placeholder="Youtube VideoID..">
			<input type="text" name="pic" placeholder="Bild URL..">
			<textarea name="text"></textarea>
			<button id="save">Speichern</button>
		</div>
			<div id="infoModal"> <span class="close">X</span>
			<span class="title"></span>
				<div class="yt"></div> <span class="pic"></span> <span class="text"></span>
			</div>
		</div>
		<div id="sidebar" style="text-align:left; z-index:2;"><br>
			<h1>
			<b><i> Navigation: </i></b></h1>
			<ul>
				<li class="separator"><a href="index.php"> Weltkarte </a></li>
				<?php
					if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
					if($_SESSION['isAdmin'] == true) {
				?>
				<button class="iconSelect">
					 <img data-offsetLeft="10" data-offsetTop="10" src="TESO-Icon.png">
			    </button>
				<button class="iconSelect">
					<img src="pin1.png">
				</button>
				<?php
					}}
				?>
			</ul>
		</div>
	<div id="foot">@Christopher Teichert</div>
	<script type="text/javascript">
		flag = false;
		$sidebar = $('#sidebar');

		$('#buttonsidebar').click(function () {
		if (flag) {
			$sidebar.animate({
				'left': '-330'
			});
			flag = false;
		} else {
			$sidebar.animate({
				'left': '0px'
			});
			flag = true;
		}
		});
		$('#sidebar').click(function () {
		if (flag) {
			$sidebar.animate({
				'left': '-330'
			});
			flag = false;
		} else {
			$sidebar.animate({
				'left': '0px'
			});
			flag = true;
		}
		});

		// Sidebarbutton links anheften
		$docHeight = $(document).height();
		$height = ($docHeight / 2) - ($('#buttonsidebar').height())/2;




		// Ergebnis dem css hinzufügen
		$('#buttonsidebar').css('top', $height);
		$('#worldmap').css('width:', $('#content').width() /2);

		var $infoModal = $("#infoModal");
		$infoModal.hide();

		$(document).on("click", ".pin", function (e) {
			$this = $(this);
			$infoModal.css("top", $this.css("top"));
			$infoModal.css("left", $this.css("left"));
			$infoModal.show();
			var title = $this.attr("data-title");
			var youtube = $this.attr("data-yt");
			var picture = $this.attr("data-pic");
			if (youtube != "") {
				youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtube + '?rel=0" frameborder="0" allowfullscreen></iframe>';
			}
			if (picture != "") {
				picture = '<figure><img src="'+ picture +'" width="100%" height="100%"  alt="" /></figure>';
			}
			var text = $this.attr("data-text");
			$infoModal.children(".title").html(title);
			$infoModal.children(".yt").html(youtube);
			$infoModal.children(".pic").html(picture);
			$infoModal.children(".text").html(text);
		});
		$("#infoModal span.close").click(function () {
			$infoModal.hide();
		});
	</script>
	<?php
		if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
		if($_SESSION['isAdmin'] == true) {
	?>
		<script type="text/javascript">
			var currentIcon = "pin1.png";
			var imgOffsetTop = 0;
			var imgOffsetLeft = 0;




			$(".iconSelect").click(function () {
				$img = $(this).children('img');
				currentIcon = $img.attr('src');
				imgOffsetTop = imgOffsetTop.attr('data-offsetTop');
				imgOffsetLeft = imgOffsetTop.attr('data-offsetLeft');
			});
			var offsetLeft;
			var offsetTop;
			$("#map").click(function (e) {
				var parentOffset = $(this).position();
				offsetLeft = e.offsetX + parentOffset.left-12;
				offsetTop = e.offsetY + parentOffset.top-25;
				openModal(offsetLeft, offsetTop);
			});




			var $modal = $("#modal");
			var clickState;
			function openModal(x, y) {
				clickState = false;
				$modal.children("input").val("");
				$modal.children("textarea").val("");
				$modal.css({
					left: x,
					top: y
				});
				$modal.show();
				return true;
			}

			$("#save").click(function () {
				dataTitle = $modal.children("input[name=title]").val();
				dataYt = $modal.children("input[name=youtube]").val();
				dataPic = $modal.children("input[name=pic]").val();
				dataMember = $modal.children("select[id=memberchoise]").val();
				dataText = $modal.children("textarea[name=text]").val();

				$.ajax({
					type: 'POST',
					url: 'savemarker.php',
					data: { title: dataTitle, yt: dataYt, pic: dataPic, text: dataText, x: offsetLeft, y: offsetTop, member: dataMember, map: "Cyrodiil", src: currentIcon }
				});

				dataString = "data-title=\"" + dataTitle + "\" data-yt=\"" +          
				dataYt + "\" data-pic=\"" + dataPic + "\" + data-text=\"" +     
				dataText + "\"";

				$("#mapContainer").append("<img " + dataString + " class=\"pin\"  src=\"" + currentIcon + "\" style=\"left:" + offsetLeft + "px;top:" + offsetTop + "px;\"> alt="" ");
				$modal.hide();
			});
			$("#modal span.delete").click(function () {
				$modal.hide();
			});
		</script>
	<?php
	}}
	?>
	<script>
		$("#mapContainer").width($("body").width());
		$("#sidebar").height($("#map").height());
	</script>
	</body>
</html>

Alles anzeigen

Ganz unten stehen die skripte

explanator

Ich werde mir jetzt nicht deinen ganzen Code vornehmen, weil mir das zu aufwendig ist, aber,
funktioniert es denn wenn du folgendes änderst:

HTML

function openModal(x, y) {
        clickState = false;
        $modal.children("input").val("");
        $modal.children("textarea").val("");
        $modal.css({
            left: x,
            top: y
        });
        $modal.show();
        return true;
}

Alles anzeigen

in

HTML

function openModal(x, y) {
        clickState = false;
        $modal.children("input").val("");
        $modal.children("textarea").val("");
        $modal.css({
            left: x,
            top: y,
            display: block
        });
        $modal.show();
        return true;
}

Alles anzeigen

Christopher25

hm nein tut mir leid, funktioniert nicht.

explanator

Dann weiss ich auch nicht weiter.
Eventuell will sich ja jemand deinen Code mal genauer ansehen und findet den Fehler.

Christopher25

ich habe die zwei Script-Blöcke mal ausgelagert, der Inhalt ist aber immer noch der selbe.
habe bei dem...

PHP

<?php        if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
        if($_SESSION['isAdmin'] == true) {
    ?>
        <script language="javascript" type="text/javascript" src="modalView.js"></script>
    <?php
    }}
    ?>

ein echo aufgerufen, die mir die Karte nochmal viel größer wiedergeben soll und es funktioniert.
Also in diesen block geht er rein.

- - - Aktualisiert - - -

So ich weiß nun woran es ungefähr liegt. Ich habe stückchen für stückchen sachen aus dem script genommen und siehe da, wenn ich

Code

$("#save").click(function () {    dataTitle = $modal.children("input[name=title]").val();
    dataYt = $modal.children("input[name=youtube]").val();
    dataPic = $modal.children("input[name=pic]").val();
    dataMember = $modal.children("select[id=memberchoise]").val();
    dataText = $modal.children("textarea[name=text]").val();

    $.ajax({
        type: 'POST',
        url: 'savemarker.php',
        data: { title: dataTitle, yt: dataYt, pic: dataPic, text: dataText, x: offsetLeft, y: offsetTop, member: dataMember, map: "Cyrodiil", src: currentIcon }
    });

    dataString = "data-title=\"" + dataTitle + "\" data-yt=\"" +          
    dataYt + "\" data-pic=\"" + dataPic + "\" + data-text=\"" +     
    dataText + "\"";

    $("#mapContainer").append("<img " + dataString + " class=\"pin\"  src=\"" + currentIcon + "\" style=\"left:" + offsetLeft + "px;top:" + offsetTop + "px;\"> alt="" ");
    $modal.hide();
});

Alles anzeigen

rausenehme geht der dialog auf.
Aber dort speichere ich ja die daten. Was ist denn daran falsch?
Ich habe so die Vermutung dass es irgendwo

Code

$("#mapContainer").append("<img " + dataString + " class=\"pin\"  src=\"" + currentIcon + "\" style=\"left:" + offsetLeft + "px;top:" + offsetTop + "px;\"> alt="" ");

hierdran liegt...

So ich habe das alt="" rausgenommen und siehe da, es funktioniert^^
Der validator zeigt troz des fehlenden alt garkeinen fehler... wie kann das denn sein?

- - - Aktualisiert - - -

Ich hätte dann noch eine Frage.
Ich habe den button um die navigationsleiste zu switchen auf der Weltkarte
ganz links am bildschirmrand per jquery angeordnet.
Das gleiche tat ich eigentlich für die unteren maps auch. Nur ist er da nicht ganz links vom
bild sondern rechts neben der karte.
Nun meine Frage, was mache ich falsch, dass der dort nicht angezeigt wird?

Das hat sich auch schon erledigt. Ich musste den komischerweise vor der Map erstellen.

Christopher25

So es tut mir leid, wenn ich nochmal stören muss.
Das Problem mit den Markern setzen habe ich leider nicht ganz gelöst bekommen.
Es hat sich herausgestellt, wenn man eine Auflösung von 1920 * 1080 hat (also meine von der ich aus setze)
dann sehen alle anderen mit der gleichen Auflösung diese Marker an der RICHTIGEN Position.
Wer aber z.b. eine Auflösung von 1920 * 1200 hat, sehen die die Marker weit nach rechts verschoben.
Woran kann das liegen? was muss ich machen?

explanator

Zitat von Christopher25

Der validator zeigt troz des fehlenden alt garkeinen fehler... wie kann das denn sein?

Der Validator versteht kein Javascript und prüft nur HTML und CSS.

Zu deinem anderen Problem musst du dich wohl mal auf die Suche machen und debuggen.

Christopher25

Na das ja ne super Hilfe
Bisher hab ich nach 4 Seiten thread nichts hilfreiches bekommen außer den hinweiß auf den Validator der mein Problem
nicht wirklich behoben hat.
Komischerweise sind so Seiten wie Ebay, Amazon etc beim Validator auch durchgefallen

Ich habe mir mal Gedanken gemacht. Wenn ich mir die Auflösung beim Setzen der Pins in die Datenbank speicher
und beim auslesen mir diese dann geben lasse, dann die Differenz zwischen der Auflösung von demjenigen der den Pin gesetzt hat
und die Auflösung von dem, der den Pin anzeigen will bilde und diese von der in der Datenbank eingetragene Position abziehe oder aufaddiere (jenachdem was rauskommt)
müsste das dann nicht funktionieren??
Oder liegt mein Problem garnicht an der Auflösung =(

marker setzen auf eine karte

Tags

Benutzer online in diesem Thema