Ausgewählte Markierergebnisse in einem div anzeigen

-1

Grundsätzlich wollen Sie eine div-Box an der Seite anstelle des Info-Fensters verwenden. Unten ist der Code. Bis jetzt habe ich die ausgewählte Markierung, die die Information über jedes Flugzeug in einem Infofenster zeigt, aber ich würde vorziehen, die Resultate in einer Seite div zu zeigen. Ich habe ein paar Dinge wie Info Box usw. angeschaut, aber nicht wirklich, was ich mehr oder weniger etwas ähnliches möchte: Image. Ich schaue mir nur an, wie die Ergebnisse im div angezeigt werden, sobald ich das css machen kann.Ausgewählte Markierergebnisse in einem div anzeigen

var infoWindows = {}; 
 
    var markers = {}; 
 
    function getIconForPlane(value) { 
 
      var r = 255, g = 255, b = 0; 
 
      return { 
 
       path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684', 
 
     scale: 0.05, 
 
     strokeOpacity: 1, 
 
     color: 'black', 
 
     strokeWeight: 1, 
 
       rotation: value.track 
 
      }; 
 
      window.setInterval(value.track, 1000); 
 
     } 
 
    
 
    function initialize() { 
 
    
 
     var mapOptions = { 
 
      center: new google.maps.LatLng(-36.363, 175.044), 
 
      zoom: 5, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 
     window.setInterval(readData, 0001); 
 
    } 
 
    
 
    function text(value) { 
 
     return '<b>Speed: </b> ' + value.speed + '<b> km/h</b>' + '<br><b>Flight: </b>' + value.flight +' <br><b>HEX: </b>' + value.hex + '<br><b>Altitude: </b>' + value.altitude + '<br><b>Vertical Rate: </b>' + value.vert_rate +'<br><b>Last radar contact: </b>' +value.seen +'<b>s</b>'; 
 
     window.setInterval(text, 1000); 
 
    } 
 
    
 
    function createInfoWindow(value, marker, map) { 
 
    var iw = new google.maps.InfoWindow({ 
 
     content: text(value) 
 
     }); 
 
     google.maps.event.addListener(marker, 'click', function() { 
 
     iw.open(map, marker); 
 
     }); 
 
     return iw; 
 
    } 
 
    
 
    function readData() { 
 
     $.getJSON('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json', function(data) { 
 
     $.each(data.aircraft, function(i, value) { 
 
      var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, value.altitude); 
 
      if (markers[value.hex]) { 
 
      markers[value.hex].setPosition(myLatlng); 
 
      console.log("moving marker for " + value.hex); 
 
      markers[value.hex].setIcon(getIconForPlane(value)); 
 
      infoWindows[value.hex].setContent(text(value)); 
 
      } else { 
 
      // create new 
 
      markers[value.hex] = new google.maps.Marker({ 
 
       position: myLatlng, 
 
       icon: getIconForPlane(value), 
 
       map: map, 
 
       title: "Callsign: " + value.flight + ", Altitude: " + value.altitude, 
 
      }); 
 
      console.log("creating marker for " + value.hex); 
 
      infoWindows[value.hex] = createInfoWindow(value, markers[value.hex] ,map) 
 
      } 
 
      
 
     }); 
 
     
 
       
 
     }); 
 
    }

html { height: 100% } 
 
    body { height: 100%; margin: 0; padding: 0 } 
 
    #map_canvas { height: 100% }

<html> 
 
    <head> 
 
    <title>NZ plane tracker</title> 
 
    <meta charset="utf-8"/> 
 
    \t \t <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
      <script type="text/javascript" src = "http://maps.google.com/maps/api/js?key=AIzaSyASZPIJcU-IEb5K9mRDLzkKbi2iHjmGACU&sensor=false"> 
 
      </script> 
 
     
 
    <ul> 
 
     <li><a class="active" href="#">Tracking</a></li> 
 
     <li><a href="//aerophotos.cf">Photos</a></li> 
 
     <li><a href="/airports">Aiports</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="/contribute">Contribute</a></li> 
 
    </ul> 
 
    </head> 
 
    <div class="markerbox"></div> 
 
    <body onload="initialize()"> 
 
    <form id="form1" runat="server"> 
 
    <div id="map_canvas" style="width: 100%; height: 93%"></div> 
 
    
 
    
 
    \t \t \t 
 
    </body> 
 
    
 
    </html>

Quelle

2017-07-09 kieran

Warum setzen Sie UL in den Kopf? – JSmith

@JSmith Ich habe es nicht einmal bemerkt! Danke – kieran

Haben Sie Ihre Konsole protokolliert? – JSmith

Ihre HTML ändern, ein div auf der linken Seite der Karte erstellen. und ändere den Inhalt des div-on-click-Ereignisses von marker. Ich hoffe es hilft.!

 <div id="left-bar" style="float:left;width: 20%;"></div> 
     <div id="map_canvas" style="width: 80%; height: height: 93%; float:left"></div>

Ändern Sie Ihre createInfoWindow-Methode.

function createInfoWindow(value, marker, map) { 
    var iw = new google.maps.InfoWindow({ 
     content: text(value) 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     // iw.open(map, marker); 
     $("#left-bar").empty(); 
     $("#left-bar").append(value); 
    }); 
    return iw; 
}

Quelle

2017-07-10 05:25:45

Nichts zeigt in der div :) – kieran

Ausgewählte Markierergebnisse in einem div anzeigen

Antwort

Verwandte Themen