Google Maps v3 Centering和Infowindow控件

时间:2012-02-08 23:47:22

标签: javascript maps

我有一张地图,其中包含供用户选择他们想要在地图上显示的内容的复选框。除了以下两个项目外,一切都很顺利。

  1. 当用户从列表中选择一个项目时,标记会在地图上显示,但地图不会在标记上重新居中。当页面加载时,标记位于地图的可视区域之外,这是必需的。

  2. 当我在地图上打开多个标记时,我希望一次只打开一个infowindow,目前如果我点击10个标记,将会打开10个infowindows。如果infowindow打开并点击另一个标记然后第一个infowindow关闭,我想拥有它。

  3. 我已经粘贴了以下标记之一的代码片段,非常感谢任何帮助!

        jQuery(document).ready(function(){
            /**
            * The Map object.
            * @type {google.maps.Map}
            */
            var mapOptions = {
                center: new google.maps.LatLng(36.812946,-119.746953),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    
    
            /**
            * The markers array.
            * @type {Object}
            */
            var markers = {};
    
    
                markers.building37 = [];
    
                var marker0237  = new google.maps.Marker({
                    visible: false,
                    icon: new google.maps.MarkerImage("images/website/brown_Marker.png",new google.maps.Size(32,37),null,null),
                    title: 'Building',
                    position: new google.maps.LatLng(36.80694607313768,-119.73590791225433),
                    center: position,
                    map: map
                });
    
                markers.building37.push(marker0237);  
    
                var info_window0237 = new google.maps.InfoWindow({
                    content: '<div id="infobubble"><div id="img"><img src="images/buildings/Foundation001.jpg" alt="Foundation Building"></div><div id="desc"><h3>Foundation</h3></div></div>',
                    maxWidth:350,
                });
    
                google.maps.event.addListener(marker0237, "click", function() {
                    info_window0237.open(map,marker0237);
                });
    
    
    
        var showBuilding37 = false;
    
        var mgrBuilding37 = null;
    
    
            /**
            * Toggles Building 37 Marker Group visibility.
            */
            function toggleBuilding37()
            {
                showBuilding37 = !showBuilding37;
                if (showBuilding37)
                    for (var i=0; i < markers.building37.length; i++)
                        markers.building37[i].setVisible(true);
                if (mgrBuilding37)
                {
                    if (showBuilding37)
                    {
                        mgrBuilding37.addMarkers(markers.building37, 0);
                        mgrBuilding37.refresh();
                    } 
                    else
                    {
                        mgrBuilding37.clearMarkers();
                        mgrBuilding37.refresh();
                    }
                }
                else 
                {
                    mgrBuilding37 = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
                    google.maps.event.addListener(mgrBuilding37, "loaded", function() {
                        if (showBuilding37)
                        {
                            mgrBuilding37.addMarkers(markers.building37, 0);
                            mgrBuilding37.refresh();
                        } 
                        else
                        {
                            mgrBuilding37.clearMarkers();
                            mgrBuilding37.refresh();
                        }
                    });
                }
            }            
    
              google.maps.event.addDomListener(
                  document.getElementById("building37-cb"),"click", toggleBuilding37);  
    
        });
    

1 个答案:

答案 0 :(得分:1)

我看不到你在哪里设置地图中心。

  1. 添加标记时,您应该执行map.setCenter(location);之类的操作。

  2. 您应该保留一个信息窗口列表,当您显示信息窗口时,循环显示其他窗口并隐藏其信息窗口。

        //Declare your info window array
        var infoWindows = new Array();
    
        var info_window0237 = new google.maps.InfoWindow({
            content: '<div id="infobubble"><div id="img"><img src="images/buildings/Foundation001.jpg" alt="Foundation Building"></div><div id="desc"><h3>Foundation</h3></div></div>',
            maxWidth:350,
        });
    
        //After you make an infowindow, add it to the array
        infoWindows.push(info_window0237);
    
        google.maps.event.addListener(marker0237, "click", function() {                          
              //When you show an infowindow on click, hide the rest
              for(i = 0; i < indowWindows.length; i++)
              {
                   //this will close all the infowindows you added to the array
                   infoWindows[i].close();
              }
              info_window0237.open(map,marker0237);
    
        });