php - 在 Google map 中显示数据库中的坐标

标签 php database google-maps coordinates

因此,在了解如何从数据库中检索 x 和 y 坐标并将其显示在 Google map 中之后:我开始工作。因此,要与我的 mySQL 数据库建立连接,请编写以下内容:

<?php
  $server     = '132.3.2.1.';
  $username   = 'you';
  $password   = 'notyou';
  $database   = 'youapp';
  $dsn        = "mysql:host=$server;dbname=$database";

  (This is all made up)

为了从数据库中检索坐标并将它们放入 JSON 字符串中,我编写了以下代码:

<?php
  include 'config.php';
  try {
    $db = new PDO($dsn, $username, $password);
    $db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
    $sth = $db->query("SELECT * FROM youapp");
    $youapp = $sth->fetchAll();
    echo json_encode( $youapp );
  } catch (Exception $e) {
    echo $e->getMessage();
  }

我很确定到目前为止我编写的代码是正确的。但我不确定 Google map 部分。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Beer Me</title>
    <link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    var map;
    function init() {
      var mapOptions = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      makeRequest('get_locations.php', function(data) {
        var data = JSON.parse(data.responseText);
        for (var i = 0; i < data.length; i++) {
          displayLocation(data[i]);
        }
      });
    }
    function makeRequest(url, callback) {
      var request;
      if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
      // IE7+, Firefox, Chrome, Opera, Safari
      } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      // IE6, IE5
      }
      request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
          callback(request);
        }
      }
      request.open("GET", url, true);
      request.send();
    }
  </script>
</head>
<body onload="init();">
  <div id="map_canvas" style="width:400px; height: 400px;"></div>
</body>
</html>

所以函数 makerequest 是一个标准的 Ajax 调用。但我不知道如何在谷歌地图中显示结果。如果有人可以查看我的代码以与我的数据库建立连接,并就如何在 Google map 中显示 makerequest 的结果提供一些建议或其他信息,我们将不胜感激。

最佳答案

一切看起来都不错,除了缺少 displayLocation 函数。只需将其添加到其中即可:

function displayLocation(item) {
    var marker = new google.maps.Marker({
        // might need to change item.lat/item.lng
        //  to match the column name in your DB
        position: new google.maps.LatLng(item.lat, item.lng),
        map: map
    });
}

关于php - 在 Google map 中显示数据库中的坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12282049/

相关文章:

java - getMap() 空点异常

javascript - GoogleMap API 事件点击放大

php - 将多维数组从 PHP 传递到 jQuery

php - 有一个 MySQL 数据库,PHP 表单不工作,但连接成功

.net - 数据库架构 API

database - postgresql:重新计算表上的行 ID

php - 未使用的 Composer 软件包会对性能或安全性产生影响吗?

php - 哪些 PHP、Xdebug 和 Eclipse 配置适用于 Windows 7 64 位?

mysql - MySQL可以存储多少数据?

android - 加载 map 失败。联系 Google 服务器时出错。这可能是身份验证问题