Question

使用 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>

..和

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

我必须使用一个循环，但即使搜索了几个小时也没有找到任何好的例子。人们会认为它是一种常见的用途......：）

Check/use jsFiddle base >>

Answer 1

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)
                    }
                });
            }
        }
    });
});

<强> DEMO

注意：

在演示中用作Geocode的伦敦酒店在普吉岛的地址不可靠
已添加电话号码字段

gmaps.js - 循环遍历元素并添加标记

1 个答案: