javascript - 如何将 Twitter Bootstrap 与 Google map v3 结合使用？

Question

我想将 Twitter Bootstrap 的选项卡式菜单包含在目前完全用 JavaScript 编码的 Google map 项目中。因为 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 会花费太长时间(如果这是我必须做的)。有没有一种方法可以仅出于选项卡式菜单的目的导入 bootstrap 和 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 不关心 map 容器内有什么。)

正如 @geocodezip 提到的，如果您发现 map 可以工作，但 map 内元素的格式发生奇怪的事情(例如平移/缩放控件被剪切)，请检查影响太多元素的 CSS 选择器，例如:

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

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

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