Javascript 谷歌地图，在标记信息窗口中显示mysql信息_Javascript_Php_Mysql_Google Maps_Google Maps Api 3

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

javascript php mysql google-maps google-maps-api-3

Javascript 谷歌地图，在标记信息窗口中显示mysql信息,javascript,php,mysql,google-maps,google-maps-api-3,Javascript,Php,Mysql,Google Maps,Google Maps Api 3,我有两个mysql表：“cars”和“locations” 通过在“Cars”表中设置“location_id”字段，将车辆分配到一个位置。我在谷歌地图中显示位置，从“位置”表中检索坐标我想做的是，在谷歌地图标记的信息窗口中显示分配给这个位置的汽车我使用get_locations.php和以下代码从DB检索信息： $query_cars = "SELECT * FROM cars where location_lat not like ''"; $cars = $db->que

我有两个mysql表：“cars”和“locations”

通过在“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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数makeRequest（url、回调）{
var请求；
if（window.XMLHttpRequest）{
request=new XMLHttpRequest（）；//IE7+、Firefox、Chrome、Opera、Safari
}否则{
request=newActiveXObject（“Microsoft.XMLHTTP”）；//IE6，IE5
}
request.onreadystatechange=函数（）{
if（request.readyState==4&&request.status==200）{
回调（请求）；
}
}
打开（“获取”，url，true）；
request.send（）；
}
var geocoder=new google.maps.geocoder（）；
var infowindow=new google.maps.infowindow（）；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（40.430013，-3.695854），
缩放：12
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
makeRequest（'get_locations.php'，函数（数据）{
var data=JSON.parse（data.responseText）；
对于（变量i=0；i


因此，单击标记时，位置名称将显示在信息窗口中。但正如我所说，我还想显示分配给这个位置的汽车名称
有人知道吗
谢谢大家!
 我对谷歌地图API很陌生，但前几天在做一些研究时，我看到了这个

将php放入contentString
一样简单吗？您必须进行内部联接查询，以便$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%';

谢谢你的建议。我忘了提到每个地点都有不止一辆车。您认为使用内部联接是否会导致问题？内部联接将返回与一个位置连接的车辆相同的行数。在这种情况下，需要一种特殊的代码操作来序列化数据（cars）以显示在一个信息窗口中。如果我理解你的要求，我相信这就是你想要做的。谢谢。我要试试这个。