谷歌地图，在标记信息窗口中显示mysql信息答案

【问题标题】：Google maps, display mysql information in marker info window谷歌地图，在标记信息窗口中显示mysql信息
【发布时间】：2014-10-15 05:49:30
【问题描述】：

我有两个 mysql 表：“汽车”和“位置”。

通过“cars”表中的字段“location_id”将汽车分配到一个位置。我正在从“位置”表中检索坐标的谷歌地图中显示位置。

我想做的是在谷歌地图标记（标记位置）的信息窗口中显示哪些汽车被分配到该位置。

我使用 get_locations.php 和这段代码从 DB 中检索信息：

  $query_cars = "SELECT * FROM cars where location_lat not like ''";
  $cars = $db->query($query_cars);
  $row_cars = $cars->fetchAll(PDO::FETCH_ASSOC);

  $query_locations = "SELECT id, name, gpslat, gpslong FROM locations where name not like '%/ Zona%' and status='Activa'";
  $locations = $db->query($query_locations);
  $rowLocations = $locations->fetchAll(PDO::FETCH_ASSOC);

  echo json_encode($rowLocations);

比我用这段代码从 html 页面调用这个脚本：

<!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="https://maps.googleapis.com/maps/api/js?key=API KEY">
    </script>

    <script type="text/javascript">
      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();
      }

      var geocoder = new google.maps.Geocoder();
      var infowindow = new google.maps.InfoWindow();

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.430013, -3.695854),
          zoom: 12
        };
        var 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]);
            }
        });

        var image = 'http://www.bluemove.es/equipo/images/car_location_Normal.png';

        function displayLocation(location) {
          var content = '<div class="infoWindow">' + location.name; // content of the pop up window
          if (parseInt(location.gpslat) == 0) {
              geocoder.geocode( { 'address': location.address }, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {

                      var marker = new google.maps.Marker({
                          map: map, 
                          position: results[0].geometry.location,
                          title: location.name,
                          incon: image
                      });

                      google.maps.event.addListener(marker, 'click', function() {
                          infowindow.setContent(content);
                          infowindow.open(map,marker);
                      });
                  }
              });
          } else {
              var position = new google.maps.LatLng(parseFloat(location.gpslat), parseFloat(location.gpslong));
              var marker = new google.maps.Marker({
                  map: map, 
                  position: position,
                  title: location.name,
                  icon: image
              });

              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent(content);
                  infowindow.open(map,marker);
              });
          }
        }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>
    <div id="map-canvas"/>
  </body>

</html>

因此，当单击标记时，位置名称会显示在信息窗口中。但正如我所说，我还想显示分配给该位置的汽车名称。

有人知道吗？

谢谢！

【问题讨论】：

标签： javascript php mysql google-maps google-maps-api-3

【解决方案1】：

您必须进行 INNER JOIN 查询，以便 $rowLocations 包含两个表值。

类似的东西：

SELECT * FROM cars AS c INNER JOIN locations AS l ON c.cars = l.location_id 
WHERE c.location_lat NOT LIKE "'" AND l.name NOT LIKE '%/ Zona%';

【讨论】：

感谢您的建议。我忘了提到每个位置都分配了不止一辆车。您认为使用 Inner join 是否会导致问题？
INNER JOIN 将返回与连接到一个位置的汽车一样多的行。在这种情况下，需要进行特殊的代码操作来序列化数据（汽车）以显示在一个信息窗口中。如果我理解您的要求，我相信这就是您想要做的。

【解决方案2】：

我对 Google Maps API 很陌生，但前几天在做一些研究时，我看到了这个。

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

是不是像把php放进那个contentString一样简单

【讨论】：

谢谢。我会试试这个。