google-maps - 谷歌地图 : auto center map on marker click

Question

在我正在制作的 map 上，我需要一些帮助。 map 不是特别复杂，因为我是初学者，我有一堆标记(完成后会有更多标记)和信息窗口，可以在单击标记或在 HTML 上选择下拉菜单的相应项目时打开页面的一侧。

当信息窗口打开时(单击或在 HTML 菜单中选择)，我想做但自己无法找到的方法是在 map 上自动居中标记。我想有某种功能可以分配给单击或信息窗口打开事件，但无法确定哪个以及如何实现它。

我的代码:

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

        }

Answer 1

一种更好的方法(视觉上)是使用 panTo 而不是 setCenter，如下所示:

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

这重新居中，但它动画而不是跳跃。