Google地图上的边栏对地图做出反应

时间:2013-01-04 21:49:18

标签: google-maps google-maps-api-3 google-maps-markers

我有一个Google地图(API v3),其中填充了指示数据库中数据的标记。我想添加一个侧边栏,检查地图上当前可见的标记,并将它们添加到侧边栏,调整地图移动时进行调整。有可能吗?

1 个答案:

答案 0 :(得分:1)

我有一个GitHub project,它会加载包含地标的KML文件,将它们放在侧边栏中,并在更改地图时使用Google Maps API调暗/照亮位置。相关部分就是这个片段:

google.maps.event.addListener(mapInstance, 'bounds_changed', function() {
    currentBounds = mapInstance.getBounds();
    for (i = 0; i < parser.docs[0].placemarks.length; i++) {
        var myLi = $("#p" + i);
        if (currentBounds.contains(parser.docs[0].placemarks[i].marker.getPosition())) {
            myLi.css("color","#000000");
        } else {
            myLi.css("color","#CCCCCC");
        }
    }
});

缩写版本是:

google.maps.event.addListener(mapInstance, 'bounds_changed', function() {
    currentBounds = mapInstance.getBounds();
    /*
     Loop over Google map placemarks and check the placemark by doing:
     if (currentBounds.contains(currentPlacemark.getPosition())) {
       // Change CSS to make sidebar entry visible
     } else {
       // Change CSS to make sidebar entry invisible
     }
     */
});

在我的示例中,mapInstance是google.maps.Map的一个实例,而currentPlacemark是您的google.maps.Marker对象之一的实例。