0

使用gmaps.js 我怎么能遍历（HTML）之类的东西：

<h1 id="location">Phuket</h1>

<div class="blist">
    <h3>Some hotel name</h3>
    <p>Adress 1</p>
</div>

<div class="blist">
    <h3>Another hotel name</h3>
    <p>Adress 2</p>
</div>

<div class="blist">
    <h3>Some name</h3>
    <p>Adress 3</p>
</div>

<div class="blist">
    <h3>Some other name</h3>
    <p>Adress 4</p>
</div>

..和：

  1. 地理代码 + 向地图添加标记
  2. <h3>在每个标记弹出窗口中添加名称
  3. 将链接添加到与它对应的每个弹出窗口（如锚链接）
  4. 为所有 GEO 代码锁定使用并添加#location，因为没有该上下文，每个名称都不会说太多

我必须使用循环，但即使搜索了几个小时也没有找到任何好的例子。有人会认为这将是一种常用的.. :)

检查/使用 jsFiddle 基础 >>

4

1 回答 1

3

gmaps适配器使这变得非常简单。

var map = new GMaps({
    div: '#mapCanvas',
    lat: 0,
    lng: 52,
    zoom: 13,
    width: '400px',
    height: '300px'
});

var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p><p>%3</p></div>';

$(".blist").each(function() {
    var title = $(this).find("h3").text();
    var address = $(this).find("p.address").text();
    var tel = $(this).find("p.tel").text();
    GMaps.geocode({
        address: address,
        callback: function(results, status) {
            if (status == 'OK') {
                var latlng = results[0].geometry.location;
                map.setCenter(latlng.lat(), latlng.lng());
                map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng(),
                    title: title,
                    infoWindow: {
                        content: popupTemplate.replace('%1',title).replace('%2',address).replace('%3',tel)
                    }
                });
            }
        }
    });
});

演示

笔记：

  • 演示中使用的伦敦酒店因为地理编码对于普吉岛的地址不可靠
  • 电话号码字段已添加
于 2012-10-26T10:48:33.003 回答