如何将Twitter Bootstrap与Google Maps v3一起使用

How do I use Twitter Bootstrap with Google Maps v3?

本文关键字：v3 Maps 一起 Google Twitter Bootstrap      更新时间：2023-09-26

我想将Twitter Bootstrap的Tabbed Menus包含在谷歌地图项目中，该项目目前完全用javascript编码。因为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中？

在测试页面中添加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插件来使用jQuery的Maps API的问题，不，你肯定不需要。我一直在一起使用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"。

相关文章：