google maps laden der map auf den button klicken - laden-Marker mit einer anderen Taste

Ich versuche zu laden Markierungen auf dem klicken einer Taste, aber irgendwo fehlt mir etwas. 1. Karte zieht und die Lasten mit einem Klick. 2. Marker laden Sie mit dem Klick auf eine andere Schaltfläche. hier ist, was ich habe:

<!DOCTYPE>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<link  type="text/css" href="
    <?php  
        $stylesarray = array("field");  
        echo $stylesarray[mt_rand(0,count($stylesarray)-1)];  
    ?>.css">

<link  href="images/favicon.ico">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"></script>
<script type="text/javascript"> 

var map = null;

$(document).ready(function(){   

    var lat=document.getElementById("latitude");
    var long=document.getElementById("longitude");       
    if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(showPosition); 
    } 
     function showPosition(position) {
         lat.value=+position.coords.latitude;
         long.value=+position.coords.longitude;
     }   
    });

function load() {

var map = new google.maps.Map(document.getElementById("mapcontainer"), {
    center: new google.maps.LatLng(20,0),
    zoom: 3,
    styles: mapstyle,
    mapTypeControl: false,
    navigationControl: false,
    streetViewControl: false,
    maxZoom: 8,
    minZoom: 3,
    mapTypeId: 'roadmap'
  });
}

function getmarkers(){
  downloadUrl("markers.php", function(data) {
    //alert ("it works");
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var id = markers[i].getAttribute("id");
      var info = markers[i].getAttribute("info");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("latitude")),
          parseFloat(markers[i].getAttribute("longitude")));
      var date = markers[i].getAttribute("date");
      var html =  "<div id='tooltip'><div id='tiptext'>" + info
                  + "<div id='number'>" + id + "</div>"
                  + "<div id='date'>" + date + "</div>" 
                  +  "</div></div>";
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
  });

</script>
  </head>
  <body>
<div id="mapcontainer">
<form>
    <input type="button" id="map" onClick="load()"></input>  
</form>
<form> 
    <input type="button" onClick="getmarkers()"></input>
</form>

</body>
</html>

xml-Beispiel:

<markers>
<marker id="330" info="blahblah" date="2012-10-03" latitude="20.00" longitude="-81.00"/>
</markers>

InformationsquelleAutor stokexx | 2012-10-04

2

Ihre Karte ist Sie eine lokale variable zu deiner initialize-Funktion. Es wird nicht zugänglich sein, um den code für das laden der Marker.

Versuchen, es zu definieren Global (außerhalb aller Funktionen):
```
var map = null;
```
Dann initialisieren Sie es in Ihrem laden-Funktion
```
function load() {
map = new google.maps.Map(document.getElementById("mapcontainer"), {
```
Das problem (nach syntax-Fehler) mit deinem geposteten code ist, dass die getmarkers Funktion ist lokal zu der Funktion laden. Es muss global sein, um aufgerufen werden, indem Sie ein HTML-element klicken Sie auf Funktion.

Live working-version, basierend auf deinem Beispiel-code
- Hinzugefügt var map = null; immer noch nichts richtig funktioniert. brauche ich für pass-alles, um downloadUrl? die Karte lädt richtig. es ist der Marker, wo ich Probleme habe.
- Kannst du uns ein link oder Ihre komplette code (oder ein jsfiddle, kann nicht wahrscheinlich machen, dass die Arbeit ohne Ihre xml-obwohl...)?
- code bearbeitet, um alle notwendigen Komponenten
- Wie wäre es mit einer Probe der xml?
- Und das css? Und Befestigung der syntax-Fehler, es ist eine fehlende "}", mapstyle ist nicht definiert.
- Beispiel-xml vorenthalten. vergessen sind die "}" beim einfügen. alles ist in Ordnung, außer für die Marker. die Karte lädt richtig und die Tasten ebenso. auch, etwas nützliches. das "Symbol" wird nicht angezeigt unter google-Konsole - > Ressourcen > Bilder. aber der Weg ist richtig. Also, ich vermute, es ist etwas, das innerhalb der Markierung-placement-code, der nicht korrekt ist.
- lassen Sie uns weiter, diese Diskussion im chat
- Ihre map-variable ist immer noch lokal, um Ihre load-Funktion. Verpasste das ändern, entfernen Sie das "var" vor, die es in Ihrem laden-Funktion.
- hahaha. unwirklich! Dank einer million!
InformationsquelleAutor geocodezip
1

Es scheint, wie Sie nicht erklären, die map-variable im globalen Bereich. Nur in der load-Funktion Umfang, deklarieren Sie Sie als eine Globale variable und es sollte funktionieren.
```
var map = null; //Declaring map in the global scope

function load() {
    //map references to global scope
    map = new google.maps.Map(document.getElementById("mapcontainer"), {
    ...
}

downloadUrl("markerinfo.php", function(data) {
      ...
      var marker = new google.maps.Marker({
        map: map, //map references to global scope
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
});
```
Versuchen Sie das einwickeln der DownloadUrl Funktionsaufruf in einer anderen Funktion und Aufruf, statt.
```
<input type="button" id="markerload" onClick="getMarkers()"></input>

function getMarkers() {
    downloadUrl("markerinfo.php", function(data) {
        ...
    });
}
```
- geocodezip schlug dies vor, und ich bin immer noch Schwierigkeiten.
- My bad, ich bemerkte, dass er antwortete Recht, nachdem ich eingereicht meine Antwort. Sind Sie immer alle javascript-Konsole Fehler?
- um ehrlich zu sein, ich bin mir nicht sicher. ich nehme an diesem Projekt als eine Lernerfahrung. ich legte eine Warnung innerhalb downloadUrl und alarmiert Sie, so dass ich weiß, dass es die Funktion aufrufen, richtig
- immer noch die gleiche Probleme mit der Verpackung downloadUrl. es muss etwas ganz einfaches. original-code editiert oben.
- Öffnen Sie die javascript-Konsole und sehen, wenn Sie eine Fehlermeldung erhalten, erhalten Sie möglicherweise eine Fehlermeldung, die verhindert, dass Sie von der Ausführung des restlichen Codes (aus dem click und darüber hinaus). Öffnen Sie die Entwickler-tools durch drücken der Taste F12 in Chrome, Firefox und IE (7-8+ glaube ich).
- aktiviert in der Konsole. keine Fehler, alle Daten stammen von der xml-Datei, die marker-Symbol-Pfad korrekt ist. kann nicht scheinen, um zu sehen, was falsch ist.
InformationsquelleAutor Roy
1

Funktion getmarkers() ist so konzipiert, um alle Marker mit einer for-Schleife
```
for (var i = 0; i < markers.length; i++) {
```
Laden Sie eine Marke an eine Zeit, die Sie benötigen, erhöhen Sie für jede Schaltfläche, klicken Sie auf

Ie Var i =0 weltweit
Inkrement ich am Ende der getmarkers() i++

Sollten Sie aufhören, den Schritten nach dem letzten Element des Arrays, wenn es um markers.length
- das stimmt, david. ich werde gehen mit einem marker an eine Zeit, sobald ich herausfinden, wie das laden aller Marker auf der Klick auf eine Schaltfläche. für einige Grund, die Markierungen sind nicht geladen, wenn ich onClick="getmarkers()"
- Wie wäre es mit einem link
- oben aufgeführten code, um alle notwendigen Komponenten
- Code wird nicht ausgeführt auf meinem localhost, wie ich nicht über die css-php-Datei oder Rückgabe aus markers.php. Aber ich sehe, dass getmarkers() nicht schließen }
InformationsquelleAutor david strachan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.