如何在 Google Maps v3 中使用 Twitter Bootstrap？

Question

我想将 Twitter Bootstrap 的选项卡式菜单包含在当前完全用 javascript 编码的 Google 地图项目中。因为 Twitter 依赖于 jQuery，所以我不知道如何同时使用它们。

当我尝试使用 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 导入 jQuery 时，我的页面将不再呈现。

我想我可能不得不使用像jQuery-ui-map 这样的插件，但是手动将整个站点重新编码为 jQuery 需要很长时间（如果这是我必须做的）。有没有办法仅出于选项卡式菜单的目的导入引导程序和 jquery，但将站点的其余部分保留在 javascript 中？

Answer 1

当您在测试页面中添加 jQuery <script> 标记时，您删除了加载您自己的脚本的 <script> 标记。这就是您的 load() 函数未定义的原因。

您当前的代码是：

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>

//<![CDATA[

var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...

看看你自己的脚本怎么没有<script>标签？

关于您关于需要一个 jQuery 插件才能将 Maps API 与 jQuery 一起使用的问题，不，您绝对不需要。我一直同时使用 jQuery 和 Maps API。考虑一下：什么是 jQuery 插件？ JavaScript 代码！没有其他的。 jQuery 插件所做的任何事情，您都可以在自己的代码中完成。

（我想人们可以想象可能需要一些特殊的簿记才能使 jQuery 和 Maps API 一起工作，但事实并非如此。jQuery 不关心地图容器中的内容。）

正如@geocodezip 提到的，如果您发现地图工作正常，但地图内元素的格式出现奇怪的事情（例如，平移/缩放控件被剪裁），请检查影响太多元素的 CSS 选择器，例如：

img {
    /* anything here is dangerous! */
}

这样的选择器会影响地图内部的图像，这些图像应该由您的 CSS 单独保留。您当前的工作测试页面中似乎没有这个问题，如果发生这种情况需要注意。

另外，只是一个不相关的提示，您的<script> 标签上不需要type="text/javascript"，<style> 标签上也不需要type="text/css"。