谷歌地图多地图引导模式不起作用

Google Maps Multiple Maps Bootsrap Modal Didn't Work

本文关键字：模式 不起作用 地图 谷歌地图      更新时间：2023-09-26

我正在开发一个网站，可以看到用户的位置，并从他们的坐标绘制地图，我使用模态来显示地图，如果我使用一个纬度和经度(一个用户在数据库)的地图显示完美，但如果我使用多个数据从数据库(超过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的模态，所以地图是模态循环内，您的答案将不胜感激。

不行，不行。你不能在php循环中定义javascript函数，那样会把一切都搞砸。

创建一个init()函数，只是回显它而不放入php变量。您应该做的是使用while循环生成一个数据数组。这些数据可以提供给函数。

像这样:

<?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>

现在，我不知道modal;但我可以建议你:只是做javascript，确保没有php(或其他)变量或javascript函数内的任何东西。

相关文章：