Question

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

这是我的控制器代码：

$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

<强>更新：尝试使用以下视图，它应该解决您的选项卡窗格问题。结果：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>

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

将Googlemaps.php和Jsmin.php放入您的帐号中 CI中的application/libraries文件夹。
通过以下Google链接生成API密钥： https://developers.google.com/maps/documentation/javascript/get-api-key 在Googlemaps.php中查找var $apiKey= ''并放置新生成的API密钥那里。
请同时让您将您的库包含在控制器功能的开头$this->load->library('googlemaps');，因为目前我无法找到您当前的控制器代码。 PS： 请确保您已在自动加载中包含您的网址助手，如果您不像我在示例代码中那样加载它。< / EM>

将您的数据传递到您的视图中 $this->load->view('jsmap', $data);

在您的控制器中尝试关注：

$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);

您的观看似乎很好。

如果您仍需要任何澄清，请不要犹豫。

Codeigniter Biostall选项卡问题上的Google Map API

1 个答案: