Ankündigung

Einklappen
Keine Ankündigung bisher.

Google maps api Route

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Google maps api Route

    Moin, ich hoffe ihr könnt mir helfen.
    Ich bin momentan mit 3 Freunden für 1 Jahr im Ausland unterwegs.
    Um ein bisschen die Erlebnisse nach Deutschland zu teilen wollte ich einen Blog einrichten.
    Mit jedem neuen Blogeintrag wird die Position in Form von Latitude und Longitude + Stadtnamen gespeichert, diese sollen dann auf einer anderen Seite des Blogs auf einer google maps karte markiert werden (was so weit auch funktioniert)
    Nun möchte ich allerdings dass man auf der Karte unseren Reiseweg nachvollziehen kann, die Punkte also in der richtigen Reihenfolge verbunden werden, und das klappt plötzlich nicht mehr so gut.
    Ich befasse mich jetzt erst 2 Tage mit der Google maps api, denke allerdings dass ich alles soweit verstanden habe und finde den fehler einfach nicht

    die routen werden teilweise doppelt gezeichnet und einmal per luftlinie was ich überhaupt nicht verstehe, momentan befinden sich 3 Punkte in der Datenbank (melbourne, sydney und brisbane)
    die route wird wie folgt gezeichnet

    http://www1.xup.to/exec/ximg.php?fid=36369440
    http://www1.xup.to/exec/ximg.php?fid=82389552

    ((es sollte Melborune -> Sydney -> Brisbane, von unten nach oben, sein))

    Link zur live-version kann ich bei nachfrage per pn zuschicken da mein Name in der Adresse vorkommt

    kompletter code:

    Code:
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		var path = new google.maps.MVCArray(),
    		service = new google.maps.DirectionsService(), poly;
    		var map = new google.maps.Map(document.getElementById("map"), {
    			zoom: 3,
    			mapTypeId: 'roadmap',
    			center: new google.maps.LatLng(-37.813611100000000000,144.963055599999960000)
    		});
    		poly = new google.maps.Polyline({ map: map });
    		var infoWindow = new google.maps.InfoWindow;
    
    		downloadUrl("marker.php", function(data) {
    			var xml = data.responseXML;
    			var markers = xml.documentElement.getElementsByTagName("marker");
    			var latlngbounds = new google.maps.LatLngBounds();
    			for (var i = 0; i < markers.length; i++) {
    				var name = markers[i].getAttribute("name");
    				var id = markers[i].getAttribute("id");
    				var point = new google.maps.LatLng(
    					parseFloat(markers[i].getAttribute("lat")),
    					parseFloat(markers[i].getAttribute("lng"))
    				);
    				var html = "<b>" + name + "</b><br/><a href='index.php?page=showblog&id=" + id + "'>Zum Blog -></a>";
    				var marker = new google.maps.Marker({
    					map: map,
    					position: point,
    				});
    				if (path.getLength() === 0) {
    					path.push(marker.position);
    					poly.setPath(path);
    				} else {
    					service.route({
    						origin: path.getAt(path.getLength() - 1),
    						destination: marker.position,
    						travelMode: google.maps.DirectionsTravelMode.DRIVING
    					}, function(result, status) {
    						if (status == google.maps.DirectionsStatus.OK) {
    							for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
    								path.push(result.routes[0].overview_path[i]);
    							}
    						}
    					});
    				}
    				latlngbounds.extend(marker.position);
    				bindInfoWindow(marker, map, infoWindow, html);
    			}
    			map.setCenter(latlngbounds.getCenter());
    			map.fitBounds(latlngbounds);
    		});
    	});
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
    
    </script>
    <div id="map" style="width: 1200px; height: 800px; margin-bottom:-50px;"></div>
    der oben festehaltene fehler stammt aus einem chrome-browser, in firefox lädt die map überhaupt nicht.. liegt das an mir oder an google?

    danke schonmal

  • #2
    ich habe die übergeordnete for-schleife durch eine rekursive funktion mit einer pause von 1s ersetzt um zu schauen in welcher reihenfolge welche linie gezeichnet wird
    überraschenderweise wurde sie danach korrekt gezeichnet..
    ist die polylinien-funktion etwa nicht hinter der rechnungsgeschwindigkeit der for-schleife hinterhergekommen?
    wenn ich die pause verkürze tritt der fehler wieder auf ?(

    das problem ist behoben, verwirrt bin ich trotzdem...
    falls dazu noch jemand ne gute erklärung hat kann er es gerne erläutern, ansonsten lasst den thread vergammeln

    mfg

    Kommentar

    Lädt...
    X