【问题标题】:Google Maps v3 Centering and Infowindow controlGoogle Maps v3 居中和信息窗口控制
【发布时间】:2012-02-08 23:47:22
【问题描述】:

我有一个带有复选框的地图,用户可以选择他们希望在地图上显示的内容。除以下两项外,一切正常。

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

  2. 当我在地图上打开多个标记时,我希望一次只打开 1 个信息窗口,目前如果我单击 10 个标记,将打开 10 个信息窗口。如果信息窗口打开并且单击另一个标记然后第一个信息窗口关闭,我想要它。

我已经为以下标记之一粘贴了代码的 sn-p,任何帮助将不胜感激!

    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);  

    });

【问题讨论】:

    标签: javascript maps


    【解决方案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);
      
          });
      

    【讨论】:

    • 我确实要求将初始地图设为中心 "var mapOptions = { center: new google.maps.LatLng(36.812946,-119.746953)," 我尝试添加 map.center 属性到标记,它要么不自动居中,要么根本不显示标记 2. 我不知道如何编码 infowindows 列表并实现循环
    • 将标记添加到标记集合时。调用 map.setCenter(marker.location);更新地图中心。我会在几秒钟内更新我的答案并帮助你完成列表。
    • CCCason,感谢您的更新和帮助我解决这个问题。当我添加 map.setCenter(marker0237.position) 时,但是当我这样做时,它会在页面加载时将地图居中到该位置,而不是在用户选择建筑物复选框时。我期待您更新的代码和帮助。谢谢
    • 您必须为复选框单击设置一个处理程序并让它执行 map.setCenter。只需确保您的地图在范围内即可。 $('.checkboxClass').click(function(){ map.setCenter(marker.location); });
    • 好的,我现在可以进行定心了!谢谢你!我期待您解决一次修复一个信息窗口的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-06-06
    • 2014-05-14
    • 1970-01-01
    • 1970-01-01
    • 2013-06-10
    • 1970-01-01
    • 2012-05-27
    相关资源
    最近更新 更多