gmaps.js 循环遍历地址并添加标记

Posted

技术标签:

【中文标题】gmaps.js 循环遍历地址并添加标记【英文标题】:gmaps.js loop through addresses and to add markers 【发布时间】:2012-12-27 21:09:02 【问题描述】:

我想使用 gmaps.js 循环遍历全球 50 多个地址并向地图添加标记。感谢对另一个问题的出色回答,我认为我已经解决了。

gmaps.js - loop through elements and add markers

简而言之,使用那里的确切答案(现场示例http://jsfiddle.net/w8bvR/3/)。

脚本侧

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

var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p></div>';
var location = $('#location').text();

$('.blist p').find('br').replaceWith(', ');

$(".blist").each(function() 
    var title = $(this).find("h3").text();
    var address = $(this).find("p.address").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)
                    
                );
            
        
    );
);

html

    <div id="mapCanvas"></div>
<h1 id="location">Phuket, Thailand</h1>

<div class="blist">
    <h3>APK Resort</h3>
    <p class="address">95 Ratchapratanusorn road<br>Kathu<br>Patong Beach 83150<br>Phuket<br></p>
</div>

<div class="blist">
    <h3>Patong Bay House</h3>
    <p class="address">160/5 Phungmuang Sai kor Rd<br>Phuket<br>Patong Beach 83150<br>Kathu<br></p>
</div>

<div class="blist">
    <h3>Bel Aire Resort</h3>
    <p class="adress">59/1-3 Sainamyen Rd Patong Kathu<br>Phuket<br>Patong Beach 8310<br>T<br></p>
</div>

但是,由于某种原因,当我从我的 mysql 获取地址 viva php 并创建 50+ 时,无论从我创建的 mysql 中选择什么顺序或选择,它都只会添加 11 个标记来映射。我有点不明白为什么它将自己限制为 11,因为谷歌 API 声称至少在那个级别上没有限制。任何帮助表示赞赏。

看到我正在从 mysql/php 获取,我确信还有一种更优雅的方式,但也没有专家。

【问题讨论】:

OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in javascript to slow it down?的可能重复 【参考方案1】:

问题是代码没有检查 OVER_QUERY_LIMIT 错误并进行适当处理。如果不处理这种情况,您将收到大约 10 个来自地理编码服务的响应(如您所见)。

【讨论】:

感谢您的提示,将朝那个方向研究

以上是关于gmaps.js 循环遍历地址并添加标记的主要内容,如果未能解决你的问题,请参考以下文章

通过 PHP 循环动态添加 <img> 标记,通过在每个循环上调用 JavaScript 函数

Google Maps geocode() 循环放置标记

如何循环遍历对象数组并根据 JavaScript 中的条件添加新的对象键?

循环遍历数组并通过索引添加到另一个数组

如何从数组中的 textarea HTML 标记中获取数据,然后循环遍历它?

循环通过 marker.layers 并仅更改一个 CCS 图层属性的问题