Javascript gmaps.js-循环元素并添加标记_Javascript_Jquery_Google Maps_Loops_Geocoding

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

javascript jquery google-maps loops

Javascript gmaps.js-循环元素并添加标记,javascript,jquery,google-maps,loops,geocoding,Javascript,Jquery,Google Maps,Loops,Geocoding,使用我如何循环使用（HTML）之类的内容：普吉岛一些酒店的名字地址1 另一个酒店名称地址2 某个名字地址3 其他名字地址4 …和：地理编码+向地图添加标记将中的名称添加到每个标记弹出窗口中将链接添加到每个弹出窗口，并将链接添加到相应的弹出窗口（如锚定链接）使用并添加所有地理代码锁定的位置，因为没有上下文，每个名称都不会说太多我必须使用循环，但即使搜索了几个小时也没有找到任何好的示例。有人会认为这是一种常见的用法……） gmaps适配器使得这个功能变得非常简单 var m

使用我如何循环使用（HTML）之类的内容：

普吉岛一些酒店的名字地址1

另一个酒店名称地址2

某个名字地址3

其他名字地址4

…和：

地理编码+向地图添加标记

将

中的名称添加到每个标记弹出窗口中

将链接添加到每个弹出窗口，并将链接添加到相应的弹出窗口（如锚定链接）

使用并添加所有地理代码锁定的位置，因为没有上下文，每个名称都不会说太多

我必须使用循环，但即使搜索了几个小时也没有找到任何好的示例。有人会认为这是一种常见的用法……）

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

var-map=新的GMAP({
分区：“#地图画布”，
纬度：0，
液化天然气：52，
缩放：13，
宽度：“400px”，
高度：“300px”
});
变量popupTemplate='%1%2
%3'；
$（“.blist”）。每个（函数（）{
var title=$（this.find（“h3”）.text（）；
var address=$（this.find（“p.address”）.text（）；
var tel=$（this.find（“p.tel”）.text（）；
地理编码({
地址:地址:，
回调：函数（结果、状态）{
如果（状态=‘正常’）{
var latlng=results[0]。geometry.location；
map.setCenter（latlng.lat（），latlng.lng（））；
map.addMarker({
lat:latlng.lat（），
lng:latlng.lng（），
标题:标题,，
信息窗口：{
内容：popupTemplate.replace（“%1”，标题）。replace（“%2”，地址）。replace（“%3”，电话）
}
});
}
}
});
});

注:

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

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

var-map=新的GMAP({
分区：“#地图画布”，
纬度：0，
液化天然气：52，
缩放：13，
宽度：“400px”，
高度：“300px”
});
变量popupTemplate='%1%2
%3'；
$（“.blist”）。每个（函数（）{
var title=$（this.find（“h3”）.text（）；
var address=$（this.find（“p.address”）.text（）；
var tel=$（this.find（“p.tel”）.text（）；
地理编码({
地址:地址:，
回调：函数（结果、状态）{
如果（状态=‘正常’）{
var latlng=results[0]。geometry.location；
map.setCenter（latlng.lat（），latlng.lng（））；
map.addMarker({
lat:latlng.lat（），
lng:latlng.lng（），
标题:标题,，
信息窗口：{
内容：popupTemplate.replace（“%1”，标题）。replace（“%2”，地址）。replace（“%3”，电话）
}
});
}
}
});
});

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

type.js

http://maps.google.com/maps/api/js?sensor=true&type=.js

type.js

http://maps.google.com/maps/api/js?sensor=true&type=.js