Question

我有这张谷歌地图：

<?php
//Conexion db

$query = mysql_query("SELECT * FROM routes"); 

?> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"> 
</script> 
<script type="text/javascript"> 


window.onload = function () {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(40.84706, -2.944336),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map_canvas'), options);


  <?php 
        for($i = 0; $i < mysql_num_rows($query); $i++){
            $icao = mysql_result($query, $i, 'from');
            $query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
            $latitude = mysql_result($query, 0, 'latitude');
            $longitude = mysql_result($query, 0, 'longitude'); 
            $city = mysql_result($query, 0, 'city'); 
        ?> 
  var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
  var image = 'http://i46.tinypic.com/33zbm09.png';
  var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
  marker = new google.maps.Marker({
    position: latLonCenter,
    map: map,
    draggable: false,
    icon: image,
    title: '<?php echo $icao; ?> - <?php echo $city; ?>',
    Airport1: Airport1
  });



    var infowindow = new google.maps.InfoWindow({
    content: Airport1
    });


    google.maps.event.addListener(marker, 'click', function () {
      var n = 1;
      var infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 320,  
        zIndex: n 
      });

      infowindow.setContent(this.Airport1);
      infowindow.setZIndex(n++);  // superpone el último infowindows
      infowindow.open(map, this);
    });

    <?php
    $query = mysql_query("SELECT * FROM routes WHERE from='$icao'");


    for($i = 0; $i < mysql_num_rows($query); $i++){
    $destination = mysql_result($query, $i, 'to');
    $query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
    $latitudeD = mysql_result($query, 0, 'latitude');
    $longitudeD = mysql_result($query, 0, 'longitude'); 
    ?>

    var PolyLine = new google.maps.Polyline({
        strokeColor: "#FF0000",
        strokeOpacity: 2.0,
        strokeWeight: 2
    });

    var polyCords = [
    new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
    ];


    google.maps.event.addListener(marker, 'click', function() {


    PolyLine.setPath(polyCords);

    PolyLine.setMap(map);
    });

<?php } } ?>



}
</script> 
  </head>

  <body> 
    <center><div id="map_canvas" style="width:850px; height:560px;"></div></center> 
  </body>

它发生的事情是，它并没有告诉我polilyne。想法是点击标记以打开折线网络到其他标记。标记显示没有问题，但点击它们时不会出现折线。

Answer 1

您必须使用ajax。单击标记将必须加载折线的JSON数据。另外我注意到你是通过PHP查询加载坐标。我建议你在一个单独的页面上执行此操作，您将以JSON格式输出它，然后通过ajax获取它以动态地将它们显示到您的地图。

谷歌地图和

1 个答案: