从PHP中的值设置googlemap中的折线

时间:2012-06-29 02:57:33

标签: php javascript

我看过这个链接:

Google map api v3 add polylines from array

这在某种程度上和我的问题有点相同..你看,我得到一个javscript错误:

Uncaught TypeError: Cannot call method 'getPath' of undefined 
AddCoordinate map:118
(anonymous function)

我的代码基本上是填充坐标,因为页面与地图一起加载..当点击被触发时(html按钮),这是唯一一次用多边形线绘制地图..我希望我解释得很好..这就是我得到的:

    var map;
    var Markers = [];
    var Coordinates = [];
    var LinePath;

    function initialize()
    {  
      var myLatLng = new google.maps.LatLng(21.291982, -140.821856);
      var myOptions = {
                zoom: 3,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
      var MarkerSize = new google.maps.Size(48,48);
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function AddCoordinate( lat, long )                                                                                                                         {
      var path = LinePath.getPath(); 
      path.push( new google.maps.LatLng( lat, long ) );
      LinePath.setPath(path);
    }


    function PlotLine()
    {
      LinePath = new google.maps.Polyline({
                path:Coordinates,                                                                                                                           
                strokeColor:"#ffffff",
                strokeOpacity:1.0,
                strokeWeight:5
                });
      LinePath.setMap(map);
    }


   <html>
    <body onload="initialize()">
    <div id="map_canvas" ></div>
    <?php
                    foreach($arrayOfPlotPoints as $key => $value){ 
                        $longitude = round($value['longitude'],5);
                        $latitude = round($value['latitude'],5);
                        $snrLevel = $value['snr_level'];
                        echo '<script type="text/javascript">AddCoordinate('.$latitude.','.$longitude.')</script>';
                    ?>
                        <option value="<?php echo $longitude.",".$latitude.",".$snrLevel?>"> Lg:<?php echo $longitude." Lt: ".$latitude." LV: ".$snrLevel?></option>
                        <?php } ?>
                    </select>
                    <br /><br />
                    <?php echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()')); ?>
echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()')); 
     ?>

******** EDITED **********

我对我的代码进行了部分修改..但是我得到了相同的错误..

Uncaught TypeError: Cannot call method 'getPath' of undefined 
    AddCoordinate (anonymous function)


function initialize() {
 //.....
 LinePath = new google.maps.Polyline({
        path:Coordinates,                                                                                                                           //san ka galing Coordinates??? dineclare ka pero di ka aman nilagyan "YATA" ng laman
        strokeColor:"#ffffff",
        strokeOpacity:1.0,
        strokeWeight:5
        });
}


function AddCoordinate( latitude, longitude )                                                                                                                       {
  var path = LinePath.getPath(); 
  path.push(  latitude, longitude  );
}

function PlotLine()
{
  LinePath = new google.maps.Polyline({
            path:Coordinates,                                                                                                                           
            strokeColor:"#ffffff",
            strokeOpacity:1.0,
            strokeWeight:5
            });
  LinePath.setMap(map);

}

<HTML>
select name="long_and_lat" id="long_and_lat" style="width:220px;height:250px;" size="100">
                <?php    
                $plotPoints = array();
                foreach($arrayOfPlotPoints as $key => $value){ 
                    $longitude = round($value['longitude'],5);
                    $latitude = round($value['latitude'],5);
                    $snrLevel = $value['snr_level'];
                    echo '<script type="text/javascript">AddCoordinate('.$latitude.','.$longitude.')</script>';
                ?>
                    <option value="<?php echo $longitude.",".$latitude.",".$snrLevel?>"> Lg:<?php echo $longitude." Lt: ".$latitude." LV: ".$snrLevel?></option>
                    <?php } ?>
                </select>
                <br /><br />
                <?php echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()')); ?>
</html>

1 个答案:

答案 0 :(得分:1)

您正在LinePath拨打AddCoordinate(),但在调用LinePath之前不会创建PlotLine()(通过点击按钮)。

也许您可以在声明时创建LinePath,然后只需从LinePath.setMap(map);拨打PlotLine()

也许是这样的:

<html>

<head>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    var map;
    var Markers = [];
    var Coordinates = [];
    var LinePath = new google.maps.Polyline({
                path:Coordinates,          
                strokeColor:"#ffffff",
                strokeOpacity:1.0,
                strokeWeight:5
                });


    function initialize()
    {  
      var myLatLng = new google.maps.LatLng(21.291982, -140.821856);
      var myOptions = {
                zoom: 3,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
      var MarkerSize = new google.maps.Size(48,48);
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    }

    function AddCoordinate( lat, long ) {
      var path = LinePath.getPath(); 
      path.push( new google.maps.LatLng( lat, long ) );
      LinePath.setPath(path);

    }

    function PlotLine()
    {
      LinePath.setMap(map);
    }

    </script>

</head>
<body onload="initialize()">
    <div id="map_canvas" ></div>
    <script type="text/javascript">AddCoordinate(11,12)</script>
</body>
</html>