PHP/MySQL 和 KML，动态生成的标记答案

【问题标题】：PHP/MySQL and KML, dynamically generated markersPHP/MySQL 和 KML，动态生成的标记
【发布时间】：2014-07-08 00:04:06
【问题描述】：

所以我目前正在开发这个具有多个交替部分的 Google 地图引擎：

1) 用户选择想看的电台，点击提交

2) 表单激活为谷歌地图输出 xml 的 .php

3) 谷歌地图模块从 .php 重新加载带有用户请求标记的地图

我的问题是我希望表单提交信息、停留在页面上，并让 Google 地图模块刷新并显示新标记。它实际所做的是将用户带到 .php（当然会显示 XML 输出）！

我已经研究过将 AJAX 原则应用于 javascript，但我使用的任何方法都不起作用，我在 Web 开发的这方面仍然非常缺乏经验。代码如下（我的地图也没有正确居中，应该以华盛顿特区为中心？）：

HTML/Javascript 代码

<html>

<head>
<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
          }
        </style>
     <script src="https://maps.googleapis.com/maps/api/js?key=JS-KEY&sensor=false">   </script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-38.8951, 77.0367);
  var mapOptions = {
    zoom: 11,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);    

  var kmlLayer = new google.maps.KmlLayer({
    url: 'gmaps.php',
    map: map
  });

  google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

 </script>

</head>

<body>
Pick your station bro
<form name="form" action="gmaps.php" method="POST">
<select name="station">
  <option value="">Select...</option>
  <option value="McPherson Square">McPherson Square</option>
  <option value="Gallery Place-Chinatown">Gallery Place-Chinatown</option>
  <option value="Metro Center">Metro Center</option>
  <option value="Mount Vernon Square">Mount Vernon Square</option>
  <input type="submit" value="Submit">  
</select>
</form>

<div id="map-canvas" style="width:79%; height:100%; float:right"></div>
<div id="content-window" style="width:19%; height:100%; float:right"></div>

</body>

</html>

PHP 代码

$station = $_POST['station']; 

define("DB_SERVER", "some.server.com"); 
define("DB_USER", "some_user"); 
define("DB_PASSWORD", "some_password"); 
define("DB_NAME", "some_db"); 
define("DB_TABLE", "some_table");  


header("Content-type: application/xml"); 

// Print the head of the document 

printf("<?xml version=\"1.0\" encoding=\"UTF-8\"?> 
<kml xmlns=\"http://earth.google.com/kml/2.0\"> 
<Document>");

if ($db = mysqli_connect(DB_SERVER, DB_USER, DB_PASSWORD)) { mysqli_select_db($db, DB_NAME); 
$query = " SELECT * FROM markers " ;

// You could add some WHERE statements here to filter the data 
// DESC means newest first 

$query .= " WHERE stations "; 

$query .= "LIKE '$station'";

// Finally query the database data 

$result = mysqli_query($db, $query) or die(mysqli_error($db));

// Now iterate over all placemarks (rows) 

while ($row = mysqli_fetch_object($result)) { 

// This writes out a placemark with some data 
// -- Modify for your case -- 

printf(' <Placemark id="%d"> 
<name>%s</name> 
<Point> 
<coordinates>%f,%f</coordinates> 
<Price>%s</Price>
<Bedrooms>%s</Bedrooms>
<Bathrooms>%s</Bathrooms>
<Distance>%s</Distance>
<Stations>%s</Stations>
</Point> 
</Placemark>', 
htmlspecialchars($row->id), 
htmlspecialchars($row->address),  
htmlspecialchars($row->lng), 
htmlspecialchars($row->lat),
htmlspecialchars($row->price),
htmlspecialchars($row->bedrooms),
htmlspecialchars($row->bathrooms),
htmlspecialchars($row->distance),
htmlspecialchars($row->stations) ); }; 

// Close the database connection 

mysqli_close($db); };

// And finish the document 

printf(" </Document> </kml>");

?>

请记住，表单正在与 PHP 对话并返回用户选择的适当值，问题在于获取表单提交以记住数据、查询 sql 数据库、打印 xml 然后填充在不离开页面的情况下使用它进行映射。此外，值得指出的是，当我输入一些值时，我已经让 .php 文件加载了 .php 文件。

非常感谢任何帮助，如果我不清楚，请告诉我！

谢谢，洛根

【问题讨论】：

标签： javascript php jquery mysql google-maps

【解决方案1】：

忘记 KML/KmlLayer 并使用 Google Maps JavaScript API v3 提供的可绘制对象。使用 AJAX 调用检索创建markers 所需的信息并在回调中呈现它们。

例子：

function loadStation(stationId) {
    $.json({
        // Your PHP file / REST API
        url: 'http://foo.bar/api/stations/' + encodeURIComponent(stationId)
    }).done(function (data) {
        // assuming 'map' is a reference to the google map object
        for (var m in data) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                map: map,
                title: m.title
            });
        }
    });
}

/*
 * TODO: Register an event handler that calls the loadStation() function
 * when the user selects a station
 */

在我看来，KML 具有相当静态的性质，非常适合存储已记录且不会更改的内容。

【讨论】：

我知道这将如何生成新的标记，但这将如何影响 HTML 表单？问题是当客户端提交他们的站点选择时，浏览器会加载 php 文件。任何链接将不胜感激，谢谢！