javascript - Codeigniter Biostall Google Map API 选项卡问题

Question

我已经尝试了很多在我的选项卡名称“ map ”上显示谷歌地图。但它只显示空白的灰色框，没有显示 map 。但是当我直接在页面上使用它时，它工作正常。我知道 resize() 函数存在一些问题。请为我提供一个解决方案，如何使用 Biostall Library 解决此问题。我在下面给出了我的代码。

这是我的 Controller 代码:

$config['center'] = '37.4419, -122.1419';
$config['zoom'] = "18";
$this->googlemaps->initialize($config);
// Get the co-ordinates from the database using our model
//$coords = $this->map_model->get_coordinates();
// Loop through the coordinates we obtained above and add them to the map
$marker = array();
$marker['position'] = '37.4419, -122.1419';
$marker['infowindow_content'] = '1600 Amphitheatre Parkway in Mountain View, Santa Clara County, California';
$marker['icon'] = base_url('assets/img/map-ico.png');
$this->googlemaps->add_marker($marker);
// Create the map
$data['map'] = $this->googlemaps->create_map();   

这是我的查看代码

<div class="tab-pane fade" id="map">
  <div class="">
    <?php echo $map['js']; ?>
    <?php echo $map['html']; ?>
  </div>
</div>

如果您想了解更多相关信息，请检查并告诉我。

等待您的答复。提前致谢

Answer 1

更新: 尝试使用以下 View ，它应该可以解决您的选项卡 Pane 问题。结果:http://prntscr.com/g6gu6s

<?=$map['js'];?>
<script>
$(document).ready(function () {
  $('.container').on('shown.bs.tab',function()
  {google.maps.event.trigger(window,'resize',{});})
  });
</script>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#map" id="mapTab" >Map</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
    </div>
    <div id="map" class="tab-pane fade">
        <?=$map['html'] ?>
    </div>
  </div>
</div>

<小时/>

上一个答案: 请确保您已完成以下每个步骤。

1. 同时放置 Googlemaps.php和 Jsmin.php在你的 CI 中的 application/libraries 文件夹。

2. 已从以下 Google 链接生成 API key : https://developers.google.com/maps/documentation/javascript/get-api-key 在 Googlemaps.php 中查找 var $apiKey= '' 并放置新生成的 API key 那里。

3. 还请确保您已将您的库包含在 Controller 函数的开头$this->load->library('googlemaps');，因为目前我不能找到您当前的 Controller 代码。 PS:如果您没有像我在示例代码中那样加载它，请确保您也将您的 url 帮助程序包含在自动加载中。>

4. 将您的数据传递到您的 View 以及最后一个 $this->load->view('jsmap', $data);

尝试在 Controller 中执行以下操作:

    $this->load->library('googlemaps');
    $this->load->helper('url');
    $config['center'] = '37.4419, -122.1419';
    $config['zoom'] = "18";
    $this->googlemaps->initialize($config);
    // Get the co-ordinates from the database using our model
    //$coords = $this->map_model->get_coordinates();
    // Loop through the coordinates we obtained above and add them to the map
    $marker = array();
    $marker['position'] = '37.4419, -122.1419';
    $marker['infowindow_content'] = '1600 Amphitheatre Parkway in Mountain View, Santa Clara County, California';
    $marker['icon'] = site_url('assets/img/map-ico.png');
    $this->googlemaps->add_marker($marker);
    // Create the map
    $data['map'] = $this->googlemaps->create_map();   

    $this->load->view('jsmap', $data);  

您的 View 看起来不错。

如果您仍需要任何说明，请随时询问。