-1

我正在尝试使用http://code.google.com/p/jquery-ui-map/在我的本地开发环境 (WAMP) 中嵌入谷歌地图。

我已经加载了所有需要的脚本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_jquery.ui.map.full.min_1.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_myscript_2.js"></script>
<script>
      $('#map_canvas').gmap().bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
        });
    });
</script>

<div id="map_canvas"></div>当然，我在脚本调用之前在我的 HTML 中放了一个空。

该函数已执行，完全没有控制台错误。我在“#map_canvas”中看到了 html，但地图位于视口之外的某个位置，朝向顶部，并且完全不可见。（似乎是内联 CSS 告诉它绝对定位..）

这是呈现的 HTML： http: //pastebin.com/V2cMt4Kr

这是我使用的代码的实际实时链接： http ://www.isawu.eu/index.html

4

3 回答 3

3

我猜你没有为你的地图容器放置任何 CSS 代码。检查我的例子：http: //jsfiddle.net/Ywknf/12/

除了最后一个（#map_canvas3）之外，所有位于 CSS 中的地图（内联或非内联）都是可见的

        <div id="map_canvas"></div>
        <div id="map_canvas1"></div>
        <div id="map_canvas2" style="width:400px; height:300px;"></div>
        <div id="map_canvas3"></div> <!--invisible -->

Καλή συνέχεια στην προσπάθεια

于 2013-02-13T13:34:30.060 回答
1

假设其他一切都是正确的。您可以尝试查找 Google Maps 容器的主容器（我相信它是 iFrame），您可以尝试将以下 CSS 样式从外部样式表应用到它：

#map_canvas > *{margin-top:-200px !important; display:block !important;}

注意： > *在这种情况下，符号将从#map_canvas 中选择所有子项

这应该让它显示在您的页面上。

于 2013-02-13T13:35:46.360 回答
0

这不是包含 Google Maps API v3 的有效方式：

<script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>

您应该删除该行，下面的版本应该可以工作，但是很旧：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

这是当前记录的包含 API 的方式

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
于 2013-02-13T13:46:34.477 回答