2

mysql データベースにデータがあり、そのデータを php 配列で読み取り、Google ジオロケーションに使用できるようにしたいと考えています。

SELECT *したがって、この例では、いくつかのパラメーターで煩わされないため、ステートメントのみを使用したいと思います...

私が達成したいのは、ポイントAからポイントBまでのマークされた線を取得することです(GPSの場所が保存された場所によって異なります)

これは、私がマップに表示したいリンクです。この例では、配列に 4 つのデータしかないPOLYLINEを追加したいと考えています。

これで、コードに戻ることができます。これは、mysql に接続するための私の PHP スクリプトです。私は mysqli を使用してきました。これは、後でデータベースにストアド プロシージャを作成するためです。混乱しないでください。

class dbMySql 
{
static function Exec($query) {
// open database
$conn = mysqli_connect(
$GLOBALS['cfg_db_Server'],
$GLOBALS['cfg_db_User'],
$GLOBALS['cfg_db_Pass']
);
if($conn === false) 
{
    throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,$GLOBALS['cfg_db_Name']);
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) 
{
    $error = mysqli_error($conn);
    mysqli_close($conn);
    throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}

このphpスクリプトをGoogle APIページの例のコードに接続し、ボタンがクリックされたときに固定値の代わりに配列値を挿入する方法:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=true">
    </script>
    <script type="text/javascript">
  function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:80%"></div>
    <div><button type="button">Click Me!</button></div>
  </body>
</html>

編集：

これは私があなたのコードを実行したときに得られるものです: エラー

EDIT2：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=true">
    </script>
    <script type="text/javascript">
  function initialize() {
  var myLatLng = new google.maps.LatLng(0, 180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
</script>
</script>
    <?PHP
class dbMySql {

    static function Exec($query) {
        // open database
        $conn = mysqli_connect('localhost','root','*****');
        if($conn === false) {
            throw new Exception(mysqli_connect_error());
    }
        mysqli_select_db($conn,'data_gps');

    $result = mysqli_query($conn,$query);

        if(is_bool($result) && !$result) {
            $error = mysqli_error($conn);
            mysqli_close($conn);
            throw new Exception($error);
        }

        mysqli_close($conn);

    return $result;
    }
}
$coordinates  = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
   $coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')' ;
 ?>
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:80%"></div>
    <div><button type="button">Click Me!</button></div>
  </body>
</html>
4

1 に答える 1

2

結果を繰り返し処理してから、それらをJavaScriptにエコーする必要があると推測しています。

データベースに緯度と経度が保存されていると仮定します。

$coordinates  = array();
$result = dbMySql::Exec('SELECT lat, lng FROM table WHERE id = 1');
while ($row = mysqli_fetch_assoc($result))
    $coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';

そして、あなたのjavascriptセクションで

var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];

編集：

<!DOCTYPE html>
<?PHP
class dbMySql {

    static function Exec($query) {
        // open database
        $conn = mysqli_connect('localhost','root','*****');
        if($conn === false) {
            throw new Exception(mysqli_connect_error());
    }
        mysqli_select_db($conn,'data_gps');

    $result = mysqli_query($conn,$query);

        if(is_bool($result) && !$result) {
            $error = mysqli_error($conn);
            mysqli_close($conn);
            throw new Exception($error);
        }

        //mysqli_close($conn);

    return $result;
    }
}
$coordinates  = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
   $coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';
 ?>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=true">
    </script>
    <script type="text/javascript">
  function initialize() {
  var myLatLng = new google.maps.LatLng(0, 180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [<?php echo implode(',', $coordinates) ?>];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
</script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:80%"></div>
    <div><button type="button">Click Me!</button></div>
  </body>
</html>
于 2012-05-19T18:50:45.793 に答える