【问题标题】:Google Maps API V3 : multiple markers and ajax infowindows? (best performance)Google Maps API V3:多个标记和 ajax 信息窗口? (最棒的表演)
【发布时间】:2011-01-20 11:15:42
【问题描述】:

我一直在使用出色的$GoMap jquery plugin,它基本上是谷歌地图 API V3 的包装器。它对我很有帮助,但是当使用大量 60+ 标记时,似乎存在一些性能问题,所以我决定是时候直接使用 V3 API。

我已经阅读了相当多的初学者教程,但考虑到我追求的是性能,我想让您的想法/sn-ps 成为在 V3 API 中以本机方式实现以下目标的最有效方式...(但对于60 多个标记)

$(function() { 
    $("#map").goMap({ 
        maptype: 'ROADMAP',
        mapTypeControl: false, 
        zoom: 9,
        markers: [        {  
            latitude: 52.941364, 
            longitude: 0.648730,         
            html: { 
                content: '<img src="http://localhost/gv2010/user_area/assets/js/carousel/loader.gif"/>',
                ajax: 'http://localhost/gv2010/maptest/ajax/gmap_window.php?job_id=4002&img=40%2Fj4002_i2523&name=B%26b+With+Tlc&village=Brancaster&url_str=bandbwithtlc&rooms_num=&sleeps_text='
            } 
        },                {  
            latitude: 52.963097, 
            longitude: 0.742940,         
            html: { 
                content: '<img src="http://localhost/gv2010/user_area/assets/js/carousel/loader.gif"/>',
                ajax: 'http://localhost/gv2010/maptest/ajax/gmap_window.php?job_id=4003&img=40%2Fj4003_i2358&name=Scolt+Cottage&village=Burnham+Overy+Staithe&url_str=scoltcottage&rooms_num=&sleeps_text='
            } 
        },                {  
            latitude: 52.904720, 
            longitude: 0.623171,         
            html: { 
                content: '<img src="http://localhost/gv2010/user_area/assets/js/carousel/loader.gif"/>',
                ajax: 'http://localhost/gv2010/maptest/ajax/gmap_window.php?job_id=4200&img=42%2Fj4200_i4599&name=1+Ringers+Cottage&village=Docking&url_str=1-ringers-cottage&rooms_num=&sleeps_text='
            } 
        }
        ],
        icon: 'map_marker.png'        
    }); 
}); 

任何帮助都非常感谢

【问题讨论】:

  • 更新:好的,事实证明是 FireBug 导致了性能问题,如果有人可以提供帮助,仍然非常热衷于将其翻译成原生谷歌地图

标签: javascript jquery performance google-maps google-maps-api-3


【解决方案1】:

使用marker clusterer怎么样?先检查this speed test。 此外,请查看this answer,了解如何直接使用 google maps api 的一些示例代码。

【讨论】:

  • 是的,我已经研究了很多集群工具,但是我还没准备好开始做集群,直到我得到了我目前在本机 API V3 中所拥有的东西。 - 我不确定的一点是如何做 ajax 信息窗口?
  • 好吧,既然您使用的是 jquery,请先设置信息窗口,就像这里 code.google.com/intl/el-GR/apis/maps/documentation/javascript/… 一样,然后在点击侦听器中发出 jquery ajax 请求并使用 jquery .html() 设置信息窗口内容跨度>
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-06-22
  • 2011-02-02
  • 2014-05-14
  • 2013-08-14
  • 2012-06-06
  • 2018-04-02
  • 2011-10-15
相关资源
最近更新 更多