谷歌地图冲突 PHP 和 Javascript答案

【问题标题】：Google Map Conflict Php and Javascript谷歌地图冲突 PHP 和 Javascript
【发布时间】：2011-11-02 13:00:08
【问题描述】：

我正在构建一个具有以下功能的应用程序

使用 javascript 创建的 3 个标签：

地图视图
列表视图
发布活动

当我加载页面时，默认操作是加载谷歌地图，其中包含从数据库中检索到的所有事件，并且它运行正常。但是，当我单击下一个帖子事件选项卡时，该地图正在加载，但在该空间上不完全可见。它拖到一个角落。

谁能帮帮我？

我是 PHP 中的 Google 地图新手。

我所做的按钮点击也是使用 javascript。

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Google Maps JavaScript API Example: Simple Map</title>
  <script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[My key goes here]" type="text/javascript"></script>
  <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

    function view_map() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("view_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }
  </script>
  <script language="javascript">
    function change_div(div_id) {
      document.getElementById('div_1').style.display = 'none';
      document.getElementById('div_2').style.display = 'none';
      document.getElementById('div_3').style.display = 'none';
      //alert(div_id);
      document.getElementById(div_id).style.display = 'block';
    }
  </script>
</head>
<body>
  <div align="center">
    <div align="left">
      <a href="javascript:void(0)" onclick="change_div('div_1')">Post Events</a> |
      <a href="javascript:void(0)" onclick="change_div('div_2')">List Events</a> |
      <a href="javascript:void(0)" onclick="change_div('div_3')">Map View</a>
    </div>
    <div align="left" id="div_1">
      <div id="map_canvas" style="width: 500px; height: 300px"></div>
      <script language="javascript">initialize();</script>
    </div>
    <div align="left" id="div_2" style="display:none">
      List Events
    </div>
    <div align="left" id="div_3" style="display:none">
      <div id="view_canvas" style="width: 500px; height: 300px"></div>
      <script language="javascript">view_map();</script>
    </div>
  </div>
</body>

</html>

【问题讨论】：

拖到一个角落，这是什么意思
地图没有完全显示在分配给地图的空间上。它缩小到一侧，我希望它显示适合空间。
您是否允许 div 的宽度/高度以适应地图的大小
是的，我有。你可以查看我的代码。无论如何，我再次将其粘贴在这里！

标签： php javascript google-maps conflict

【解决方案1】：

对不起，我真的不知道，因为你的 api 是旧版本，我没有密钥，它不能工作，我只能建议很少的东西

首先：将view_map(); 脚本块放在view_canvas div 中

<div align="left" id="div_3" style="display:none">
  <div id="view_canvas" style="width: 500px; height: 300px"><script language="javascript">view_map();</script></div>

</div>

第二件事是你的change_div() 函数，它看起来有点大。

最后可能是更新到较新的 Map API，您不需要密钥，并且更向后兼容旧浏览器。

更新：

如果您将例如view_map() 放入

<a href="javascript:void(0)" onclick="change_div('div_3');view_map();">Map View</a>

从div_3 中删除<script>view_map()</script> 应该可以正确显示。

两个地图都在启动时初始化并且无法检查调整大小。

【讨论】：

@Neeraj 查看更新以回答上面的问题，并使用您的密钥删除您的评论
@David.. 非常感谢老兄.. 我完全正确.. 再次感谢...