Question

我正在开发一个可以看到用户的网站。位置和从他们的坐标绘制地图，我使用模态来显示地图，如果我使用一个纬度和经度（数据库中的一个用户）地图显示完美，但如果我使用数据库中的多个数据（超过1数据库中的用户），地图没有显示，我无法弄清楚问题是什么，所以任何人都可以帮助我？这是代码：

while($u=mysqli_fetch_array($query)){
//$coordinate format from database is 123.456,789.876
$latlng = explode(",",$coordinate);
$lat = $latlng[0];
$lng = $latlng[1];
echo "
<tr>
    <td>
    <script src='https://maps.googleapis.com/maps/api/js?callback=init$modal'></script>
    <script type='text/javascript'> 
        function init$modal() {
          var map$modal;
          var latlng$modal = {lat: $lat, lng: $lng};
          var myOptions = {
                zoom: 16,
                center: latlng$modal,
                mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map$modal = new google.maps.Map(document.getElementById('map_canvas$modal'),myOptions);

          var marker = new google.maps.Marker({
            position: latlng$modal,
            map: map$modal
          });


          $('#myModal$modal').on('shown.bs.modal', function(e) {
              google.maps.event.trigger(map, 'resize');
              return map.setCenter(latlng$modal);
          });
        }
    </script>
    <div class='modal fade' id='myModal$modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
      <div class='modal-dialog'>
        <div class='modal-content'>
          <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
          </div>
          <div class='modal-body datauser'>
            <table class='table'>
                <tr>
                    <td style='vertical-align: top;'>
                        <div class='mapcaller' id='map_canvas$modal' style='width:100%; height:250px;'></div>
                    </td>
                </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <button type='button' data-toggle='modal' data-target='#myModal$modal' class='btn btn-default btn-sm' style='float: right; margin-right: 5px; margin-left: 5px;'>
      <i class='fa fa-info-circle'></i> See data
    </button>
    </td>
</tr>";
$modal+=1;

我使用bootstrap的模态，因此地图位于模态循环中，您的答案将会受到赞赏。

Answer 1

不，那不会奏效。你不能在php循环中定义javascript函数，这会弄乱一切。

创建1个init（）函数，只需在不放入php变量的情况下回显它。你应该做的是使用while循环生成1个数据数组。您可以将这些数据提供给该功能。

这样的事情：

<?php
$locations = array();
while($u = mysqli_fetch_array($query)) {
  $latlng = explode(",", $u);
  $locations[] = array('lat'=>$latlng[0], 'lng'=>$latlng[1]);
}
// this turns a php array (or object) in a string.  That string can be read by javascript.
$locations_json = json_encode($locations);  
// now we make a javascript variable that contains this data.
echo '<script>
  // global variable, you can access this data anywhere in the javascript
  var locations = ' . $locations_json . ';
</script>';
?>
<script>
function init() {
  // etc.
}
// etc.
</script>

现在，我不知道模态;但我可以建议你：只需制作javascript，确保javascript函数中没有php（或其他）变量或任何内容。

谷歌地图多地图Bootsrap Modal没有工作

1 个答案: