Question

我想在Google Maps项目中包含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？

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插件来使用带有jQuery的Maps API的问题，不，你肯定不需要一个。我一直在使用jQuery和Maps API。考虑一下：什么是jQuery插件？ JavaScript代码！没有其他的。任何jQuery插件都可以做，你可以用你自己的代码。

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

正如@geocodezip所提到的，如果您发现地图有效但奇怪的事情发生在地图内部的元素格式化（例如，平移/缩放控制被剪裁），请检查影响太多元素的CSS选择器，例如：

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

这样的选择器会影响地图里面的图像，这应该由CSS保留。在您当前的工作测试页面中，您似乎没有遇到此问题，只是在发生这种情况时需要注意的事项。

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

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

1 个答案: