谷歌地图：点击标记后自动居中地图

Question

我正在制作一张地图，需要一些帮助。由于我是初学者，所以这张地图并不特别复杂，我有一堆标记（完成后会有更多），每个标记都有信息窗口，可以在单击标记或选择页面 HTML 部分相应项目时打开。

我想做的事情是，在信息窗口打开（单击或从 HTML 菜单中选择）时自动将标记居中显示在地图上。我想，肯定有某种函数可以分配给单击或信息窗口打开事件，但我找不到该如何实现。

我的代码：

function initialize() {

      var CarteStyles = [
        {
          featureType: "all",
          stylers: [
            { saturation: -50 }
          ]
        },
        {
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      },
        {
            featureType: "road",
            stylers: [
              { visibility: "simplified" },
              { saturation: -90 }
            ]
        },
        {
        featureType: "road.local",
        "stylers": [
          { "color": "#dbdbd4" }
        ]
      },
    {
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "off"}
          ]
        },
        {
            featureType: "poi",
            stylers: [
              { visibility: "off" }
            ]
        },
        {
          featureType: "poi.park",
          stylers: [
            { visibility: "on" }
          ]
        },
        {
          featureType: "poi.park",
          elementType: "labels",
          stylers: [
            { visibility: "off"}
          ]
        }
      ];

      var CarteType = new google.maps.StyledMapType(CarteStyles,
        {name: "Carte"});

      var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(48.872769, 2.30488),
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,'Carte'],
          position: google.maps.ControlPosition.TOP_LEFT,
          style: google.maps.MapTypeControlStyle.DEFAULT
        }
      };
      var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

      map.mapTypes.set('Carte', CarteType);
      map.setMapTypeId('Carte');

    <!--START Hpr-->        
            var contentStringHpr = '<div id="content">'+
                '<h2 id="firstHeading" class="firstHeading">HPR</h2>'+
                '<div id="bodyContent">'+
                '<p>Descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringHpr
            });
            var HprMarker = new google.maps.Marker({
                position: new google.maps.LatLng(48.856682, 2.3274526),
                map: map,
                icon: new google.maps.MarkerImage('icon_hpr.png'),
                title:"HPR",
                zIndex: 3});
    <!--STOP Hpr-->

    <!--START Cal-->        
            var contentStringCal = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">CAL</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringCal
            });

            var CalImage = new google.maps.MarkerImage('icon_cal.png'
            );

            var CalPos = new google.maps.LatLng(48.872769, 2.30488);

            var CalMarker = new google.maps.Marker({
                position: CalPos,
                map: map,
                icon: CalImage,
                title:"Cal",
                zIndex: 3});
    <!--STOP Cal-->

    <!--START Rsh-->        
            var contentStringRsh = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RSH</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRsh
            });

            var RshImage = new google.maps.MarkerImage('icon_rsh.png'
            );

            var RshPos = new google.maps.LatLng(48.865862, 2.329943);

            var RshMarker = new google.maps.Marker({
                position: RshPos,
                map: map,
                icon: RshImage,
                title:"RSH",
                zIndex: 3});
    <!--STOP Rsh-->

    <!--START Rh-->     
            var contentStringRh = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RH</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRh
            });

            var RhImage = new google.maps.MarkerImage('icon_rh.png'
            );

            var RhPos = new google.maps.LatLng(48.874140, 2.300144);

            var RhMarker = new google.maps.Marker({
                position: RhPos,
                map: map,
                icon: RhImage,
                title:"RH",
                zIndex: 3});
    <!--STOP Rh-->

    <!--START Rdr-->        
            var contentStringRdr = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RDR</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRdr
            });

            var RdrImage = new google.maps.MarkerImage('icon_rdr.png'
            );

            var RdrPos = new google.maps.LatLng(48.865717, 2.308944);

            var RdrMarker = new google.maps.Marker({
                position: RdrPos,
                map: map,
                icon: RdrImage,
                title:"RDR",
                zIndex: 3});
    <!--STOP Rh-->

    <!--START Boutique1-->      
            var contentStringBoutique1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">Boutique1</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringBoutique1
            });

            var Boutique1Image = new google.maps.MarkerImage('icon_bags_2.png'
            );

            var Boutique1Pos = new google.maps.LatLng(48.87, 2.31);

            var Boutique1Marker = new google.maps.Marker({
                position: Boutique1Pos,
                map: map,
                icon: Boutique1Image,
                title:"Boutique1",
                zIndex: 3});
    <!--STOP Boutique1-->

    <!--START Place1-->     
            var contentStringPlace1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">Place1</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringPlace1
            });

            var Place1Image = new google.maps.MarkerImage('icon_place_arc.png'
            );

            var Place1Pos = new google.maps.LatLng(48.873836,2.295037);

            var Place1Marker = new google.maps.Marker({
                position: Place1Pos,
                map: map,
                icon: Place1Image,
                title:"Place1",
                zIndex: 3});
    <!--STOP Place1-->

            google.maps.event.addListener(HprMarker, 'click', function() {
                infowindow.setContent(contentStringHpr);
                infowindow.open(map,HprMarker);
            });
            google.maps.event.addListener(CalMarker, 'click', function() {
                infowindow.setContent(contentStringCal);
                infowindow.open(map,CalMarker);
            });
            google.maps.event.addListener(RshMarker, 'click', function() {
                infowindow.setContent(contentStringRsh);
                infowindow.open(map,RshMarker);
            });
            google.maps.event.addListener(RhMarker, 'click', function() {
                infowindow.setContent(contentStringRh);
                infowindow.open(map,RhMarker);
            });
            google.maps.event.addListener(RdrMarker, 'click', function() {
                infowindow.setContent(contentStringRdr);
                infowindow.open(map,RdrMarker);
            });
            google.maps.event.addListener(Boutique1Marker, 'click', function() {
                infowindow.setContent(contentStringBoutique1);
                infowindow.open(map,Boutique1Marker);
            });
            google.maps.event.addListener(Place1Marker, 'click', function() {
                infowindow.setContent(contentStringPlace1);
                infowindow.open(map,Place1Marker);
            });

            var selectChoices = {
                Boutique1Choice: Boutique1Marker,
                Place1Choice: Place1Marker,
                CalChoice: CalMarker,
                RshChoice: RshMarker,
                RhChoice: RhMarker,
                RdrChoice: RdrMarker,
                HprChoice: HprMarker
            };

            google.maps.event.addDomListener(
                document.getElementById("selectLocation"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation2"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation3"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation4"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });

        }

- Tsokoa

Answer 1

使用panTo而不是setCenter会让地图视觉效果更好，像这样：

google.maps.event.addListener(RdrMarker, 'click', function() {
   map.panTo(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

这会重新对齐，但它会以动画效果展现而不是跳跃。

- Dan

---

我当时想..这太糟糕了，然后我向下滚动到你的答案。谢谢你帮我节省了一些时间 :) - codeaddict

太高兴了，我往下滚动了一下，这应该是正确的答案！谢谢你。 - Zach Tackett

Answer 2

您已经在标记上使用了点击处理程序，所以您只需要添加一行代码来将地图居中于标记上：

google.maps.event.addListener(RdrMarker, 'click', function() {
   map.setCenter(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

- Michal Klouda

---

我知道这个解决方案已经比较老了，但是Dan的回答使用map.panTo()函数能够产生更加美观的效果，因为它不会立刻跳到新的中心点。当然，这取决于你想要什么效果。 - codo-sapien

同意 @codo-sapien 的观点。他的答案更好，提升了用户体验。 - Zach Tackett

请记住，如果新坐标远离当前位置 - 并且这取决于缩放级别 - panTo 将会像 setCenter 一样运行。 - ed1nh0

Answer 3

使用以下代码可以在点击标记时自动将地图居中：

google.maps.event.addListener(marker, 'click', function() {
     map.setCenter(marker.getPosition());   
});

- Anup

---

你能为这个答案提供一下解释吗？谢谢！ - meetar