googlemaps API V3 之（四）marker局部加载优化处理

最新推荐文章于 2021-11-03 15:42:24 发布

原创最新推荐文章于 2021-11-03 15:42:24 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#优化 #api #function #框架

GoogleMaps 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何解决SenchaTouch Ext.Map组件中marker局部加载的问题。通过放弃使用框架内置地图组件并采用自定义方式生成地图，利用Google Maps API监听地图边界变化事件，实现marker按需加载和更新。

marker局部加载会遇到很多问题，比如在使用senchtouch的Ext.Map（）框架的时候。找不到map什么适合才显示出来，那么就不能获得显示区域map的var bounds = map.getBounds(); 区域（获得这个可以用于你的marker的筛选加载）。

所以只好放弃框架，在外面生成一个map在放入容器内。外面生成map时，需要获取边界，可以使用

google.maps.event.addListenerOnce(map, 'bounds_changed',
function() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();});这样当你载入地图的适合你就获得了地图的两个边界，就可以用于marker的筛选。

每次拖动自动加载该区域的marker可以用google.maps.event.addListener(map, 'mouseup', function() {});函数内部添加marker。不过你还得删除你之前的marker，如果你使用MarkerClusterer的话，那么你可以直接使用markerclusterer.clearMarkers();将marker全部移除。然后再添加新的marker

ok..........怕自己忘记掉，经常丢掉文件.......或者乱修改不认识了......做下笔记....