Hallo zusammen,
da ich recht frisch im JavaScript-Geschäft bin, bin ich noch etwas unsicher, wenn es zu einer Codestruktur kommt.
Mein aktuelles Projekt handelt darum, mit der Google Maps API Daten(x,y Koordination) per JSON von einem PHP Skript zu holen und dieses Daten auf der Karte darzustellen.
Mit den Daten des JSON Objektes erzeuge ich Punkte auf der Karte(Marker) und speichere diese in ein JS Array.
Das aktuelle Programm, läd automatisch Punkte nach, wenn a) neue hinzugekommen sind b) ein Punkt gelöscht wurde c) die Koordination eines Punktes verändert wurden.
Es funktioniert alles auch mittlerweile super, nur bin ich mir wie gesagt in der Struktur sehr unsicher. Ich bin es so gewohnt PHP-OOP zu nutzen, dass ich totale Probleme mit der Gültigkeit der Variablen haben.
Ich würde mich deshalb freuen, wenn ein JS-Erfahrener mal über mein kleinen Code drüber schaut und mir Verbesserungen gibt.
Vorallem meine Funktion fetchJSON(), hat sich falsch angefühlt zu programmieren, in dieser Form..
da ich recht frisch im JavaScript-Geschäft bin, bin ich noch etwas unsicher, wenn es zu einer Codestruktur kommt.
Mein aktuelles Projekt handelt darum, mit der Google Maps API Daten(x,y Koordination) per JSON von einem PHP Skript zu holen und dieses Daten auf der Karte darzustellen.
Mit den Daten des JSON Objektes erzeuge ich Punkte auf der Karte(Marker) und speichere diese in ein JS Array.
Das aktuelle Programm, läd automatisch Punkte nach, wenn a) neue hinzugekommen sind b) ein Punkt gelöscht wurde c) die Koordination eines Punktes verändert wurden.
Es funktioniert alles auch mittlerweile super, nur bin ich mir wie gesagt in der Struktur sehr unsicher. Ich bin es so gewohnt PHP-OOP zu nutzen, dass ich totale Probleme mit der Gültigkeit der Variablen haben.
Ich würde mich deshalb freuen, wenn ein JS-Erfahrener mal über mein kleinen Code drüber schaut und mir Verbesserungen gibt.
Vorallem meine Funktion fetchJSON(), hat sich falsch angefühlt zu programmieren, in dieser Form..
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
$(document).ready(function () {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var markersarr = [];
var objOldLength = 0;
var firstTime = true;
function add_marker(lat, lng, map)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: 'Hello World!'
});
markersarr.push(marker);
}
function deleteMarkers() {
for (var i = 0; i < markersarr.length; i++) {
markersarr[i].setMap(null);
}
markersarr = [];
}
function ajaxsetMarkers() {
$.ajax({
type: "POST",
url: "dbrequest.php",
dataType: "json",
success: function (data) {
fetchJSON(data);
}
})
}
function fetchJSON(jsonObj)
{
if (firstTime === true)
{
for (var i = 0; i < jsonObj.length; i++)
{
var lat = jsonObj[i]["lat"];
var lng = jsonObj[i]["lng"];
add_marker(lat, lng, map);
}
}
else
{
if (jsonObj.length < markersarr.length) //Wenn ein Marker aus DB gelöscht wurde
{
deleteMarkers();
firstTime = true;
fetchJSON(jsonObj);
}
else if (jsonObj.length > markersarr.length) // Wenn ein Marker hinzugefügt wurde von DB
{
var difference = jsonObj.length - markersarr.length;
var index = (jsonObj.length - difference) - 1; // Gesamtlänge des Arrays MINUS anzahl der fehlenden Einträge (Differenz)- 1 (da bei 0 anfängt) um letze Einträge zu holen
for (var i = 0; i < difference; i++) {
index++; // Marker ergänzen und Index erhöhen um zum nächsten Eintrag zu kommen.
var lat = jsonObj[index]["lat"];
var lng = jsonObj[index]["lng"];
add_marker(lat, lng, map);
}
}
for (var i = 0; i < jsonObj.length; i++)
{
if (markersarr[i]["position"]["A"] !== jsonObj[i]["lat"] || markersarr[i]["position"]["F"] !== jsonObj[i]["lng"]) { // Prüfe ob sich Werte geändert haben, mit aktuellen php Json und bisherigen Markeren vergleichen
var newlatlng = new google.maps.LatLng(jsonObj[i]["lat"], jsonObj[i]["lng"]);
markersarr[i].setPosition(newlatlng);
}
}
}
firstTime = false;
}
function showMarkers() {
ajaxsetMarkers();
setTimeout(function () {
showMarkers();
}, 1000);
}
showMarkers();
});
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>