使用谷歌地图在jquery mobile中添加轮播

Posted 2023-05-09

【中文标题】使用谷歌地图在jquery mobile中添加轮播

【英文标题】：add carousel in jquery mobile with google map

【发布时间】：2014-04-22 20:19:49

【问题描述】：

我想用 google map 在 jquery mobile 上创建一个页面。

类似这样的： Reference from Omar

但在页面下方有一个轮播，您可以在其中滚动并从中选择图钉。

我尝试将owl carousel 与演示代码、css 和 html 一起使用，但它似乎不起作用，或者更确切地说，它没有显示在屏幕上。

<div id="owl-demo" class="owl-carousel">
  <a class="item link"><h1>1</h1></a>
  <a class="item link"><h1>2</h1></a>
  <a class="item link"><h1>3</h1></a>
  <a class="item link"><h1>4</h1></a>
  <a class="item link"><h1>5</h1></a>
  <a class="item link"><h1>6</h1></a>
  <a class="item link"><h1>7</h1></a>
  <a class="item link"><h1>8</h1></a>
  <a class="item link"><h1>9</h1></a>
  <a class="item link"><h1>10</h1></a>
  <a class="item link"><h1>11</h1></a>
  <a class="item link"><h1>12</h1></a>
  <a class="item link"><h1>13</h1></a>
  <a class="item link"><h1>14</h1></a>
  <a class="item link"><h1>15</h1></a>
  <a class="item link"><h1>16</h1></a>
</div>

感谢是否有人可以帮助我。谢谢

【参考方案1】：

owl carousel 似乎与 jQM 配合得很好。只需为您的地图创建一个 div 并为您的轮播创建另一个。根据需要放置它们并在 pagecreate 或容器 beforeshow 中进行初始化：

$(document).on("pagecreate", "#page1", function () 
    $("#owl-demo").owlCarousel(
        items: 4,
        itemsDesktop: [1199, 4],
        itemsDesktopSmall: [1080, 3],
        itemsTablet: [768, 2],
        itemsMobile: [450, 1]
    );

    loadMap("#map-canvas");
);

确保您引用页面中的 owl css 文件以及 js 文件。

这是一个有效的DEMO

【讨论】：

@Omar，我相信你的会很棒！

会一团糟，相信我；）