如何循环显示来自跟踪路由输出的谷歌地图v3中的标记


how to looping to display markers in google maps v3 from traceroute output

我是php mysql和google maps v3的新手。我在谷歌地图v3中遇到了问题。我制作了基于网络的跟踪路由,并在谷歌地图v3中映射了跟踪路由的结果,用于我大学教育的最后一个项目。我尝试了很多教程,但没有奏效。我也尝试了这个论坛中的教程,但没有任何效果。所以我的问题是我无法显示我从数据库中获取位置数据的多个标记。也许是因为我是新手,不知道该怎么做。我也混淆了循环以显示标记。所以这是php代码:

<?php
error_reporting(E_ALL ^ (E_NOTICE));
ini_set('max_execution_time', 360);
$enable_log_user = FALSE;
global $ip, $host_name,  $host_ip, $output, $integer;
$host  = @$_POST['host']; 
$trace = @$_POST['trace'];
$self  = $_SERVER['PHP_SELF'];
include("phpsqlajax_dbinfo.php");
$connection = mysql_connect ('127.0.0.1', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can''t use db : ' . mysql_error());
} 
function get_ip()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP']))   //check ip from share internet
    {
      $ip=$_SERVER['HTTP_CLIENT_IP'];
    }
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))   //to check ip is pass from proxy
    {
      $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    else
    {
      $ip=$_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}
$ip = get_ip(); 
?>
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[
    </script>
  </head>
<body onload="initialize()">
<form name="tools" action="<?php $self ?>" method="post">
    <p><font size="2">Your IP is <?php $ip ?> </font></p>
    <input type="text" name="host" value=""></input>
    <input type="submit" name="trace" value="Traceroute!"></input>
    </form>
    <?php
    if ($_POST['submit']) 
{
    if (($host == 'Enter Host or IP') || ($host == "")) {
        echo '<br><br>You must enter a valid Host or IP address.';
        exit; } 
    if(eregi("^[a-z]",  $host))
    {
        $host_name = $host;
        $host_ip = gethostbyname($host);
    }
    else
    {
        $host_name = gethostbyaddr($host);
        $host_ip = $host;
    } 
}

    $host= preg_replace ("[-a-z0-9!#$%&''*+/=?^_`{|}~]","",$host);
    $command = "tracert $host";
    $fp = shell_exec("$command 2>&1");
    $output .= (htmlentities(trim($fp)));
    echo "<pre>$output</pre>";
    echo '<br/>';
    $array = array($output);
    $space_separated = implode(" ", $array);
    function explodeRows($data) {
      $rowsArr = explode("'n", $data);
      return $rowsArr;
    }
    function explodeTabs($singleLine) {
      $parsed = preg_split('/ +/', $singleLine);
      return $parsed;
    }
    $data     = $space_separated;
    $rowsArr  = explodeRows($data);
    for($a=3;$a<count($rowsArr)-2;$a++) 
    {
        $lineDetails[$a] = explodeTabs($rowsArr[$a]);
        if (empty($lineDetails[$a][9]))
        {
            $ipList[] = $lineDetails[$a][8];
        }
        else
        {
            $ipList[] = substr($lineDetails[$a][9], 1, -1);
        }
    }
    for ($b=0; $b<count($ipList); $b++)
    {
        if ($ipList[$b] != "")
        {
            $arrLine[]=$ipList[$b];
        }
    }
function ip_address_to_number($IPaddress)
{
    if ($IPaddress == "") {
        return 0;
    } else {
        $ips = explode (".", "$IPaddress");
        return ($ips[3] + $ips[2] * 256 + $ips[1] * 256 * 256 + $ips[0] * 256 * 256 * 256);
    }
}
for($c=0; $c<count($arrLine); $c++) {
$integer[] = ip_address_to_number($arrLine[$c]);
}
    ?>
    <script type="text/javascript">
        var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
        new google.maps.Size (70, 83),
        new google.maps.Point (0,0),
        new google.maps.Point (10,34));
    var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size (89, 85),
        new google.maps.Point (0, 0),
        new google.maps.point (12, 35));
        var map;
    function initialize() {
    var myLatlng = new google.maps.LatLng(41.258531,-96.012599);
    var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <?php
    $posisi = array();
    foreach ($integer as $lokasi) {
    $query = "SELECT cl.locId, cl.country as country, cl.region as region, cl.city as city, cl.postalCode as postalCode, cl.latitude as latitude, cl.longitude as longitude, cl.metroCode as metroCode, cl.areaCode as areaCode
    FROM (SELECT locId as idcihuy FROM cityblocks WHERE $lokasi BETWEEN startIpNum AND endIpNum) cb, citylocation cl WHERE cb.idcihuy = cl.locId";
    $result = mysql_query($query);
    while ($location = @mysql_fetch_assoc($result)){
    $posisi[]= 'new google.maps.LatLng(' . $location['latitude'] . ', ' . $location['longitude'] . ')';
    }
    }
    ?>
    <!-- var infoWindow = new google.maps.InfoWindow; -->
     var point = [<?php echo implode(',', $posisi) ?>];
     var icon = pinImage;
     var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: pinImage,
        shadow: pinShadow
        });
             marker.setMap(map);
        }
    </script>
<div id="map_canvas" style="width: 900px; height: 500px"></div>
</body>
</html>

这是 html 代码:

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    </script>
  </head>
<body onload="initialize()">
<form name="tools" action="" method="post">
    <p><font size="2">Your IP is  </font></p>
    <input type="text" name="host" value=""></input>
    <input type="submit" name="trace" value="Traceroute!"></input>
    </form>
    <pre>Tracing route to youtube-ui.l.google.com [173.194.38.129]
over a maximum of 30 hops:
  1   204 ms   238 ms   233 ms  192.168.1.1 
  2   992 ms   241 ms   200 ms  192.168.1.11 
  3   852 ms   239 ms   502 ms  192.168.4.36 
  4  1079 ms   257 ms   281 ms  192.168.4.36 
  5   856 ms   321 ms   306 ms  192.168.1.11 
  6     *        *        *     Request timed out.
  7  1073 ms   239 ms   198 ms  205.128.240.180.telin.sg [180.240.128.205] 
  8   216 ms   292 ms   281 ms  109.190.240.180.telin.sg [180.240.190.109] 
  9   239 ms   239 ms   299 ms  72.14.215.170 
 10  1838 ms   539 ms   508 ms  209.85.243.158 
 11   467 ms   998 ms  1098 ms  72.14.233.79 
 12  1601 ms   239 ms     *     sin04s01-in-f1.1e100.net [173.194.38.129] 
 13   790 ms   356 ms   179 ms  sin04s01-in-f1.1e100.net [173.194.38.129] 
Trace complete.</pre><br/>  <script type="text/javascript">
        var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
        new google.maps.Size (70, 83),
        new google.maps.Point (0,0),
        new google.maps.Point (10,34));
    var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size (89, 85),
        new google.maps.Point (0, 0),
        new google.maps.point (12, 35));
        var map;
    function initialize() {
    var myLatlng = new google.maps.LatLng(41.258531,-96.012599);
    var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <!-- var infoWindow = new google.maps.InfoWindow; -->
     var point = [new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574)];
     var icon = pinImage;
     var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: pinImage,
        shadow: pinShadow
        });
        marker.setMap(map);
        }
    </script>
<div id="map_canvas" style="width: 900px; height: 500px"></div>
</body>
</html>

好吧,如果你们读了我的代码,我真的很抱歉。看起来一团糟。因为我不知道如何很好地显示代码。我想得到帮助的最重要的事情是地图。了解如何显示所有标记。尤其是循环。谷歌地图没有显示标记。它仅显示地图。所以对于所有读过这个问题的大师。我只是需要你的帮助尽快。如果我的英语不好,我真的很抱歉,我对你们的错误。

问题是你没有给你的标记任何位置:

 var point = [];
 var icon = pinImage;
 var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: pinImage,
    shadow: pinShadow
    });

因此,您所做的只是将仓位创建为空数组。 你需要在那里为这个位置创建一个 LatLng()。


所以现在你有一系列要点:

 var point = [new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574)];
 var icon = pinImage;
 var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: pinImage,
    shadow: pinShadow
    });
    marker.setMap(map);

您需要做的是遍历数组,为每个数组创建一个标记:

var point = [new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(1.3667, 103.8000),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574),new google.maps.LatLng(37.4192, -122.0574)];
var icon = pinImage;
for (var i = 0; i < point.length; i++) {
     var marker = new google.maps.Marker({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow
        });
}

此外,setMap 行是多余的,因为当你说 map:map 时,这就是你需要做的。