谷歌地图缩放点击指针

Google map zooming on clicking the pointer

本文关键字：指针缩放谷歌地图更新时间：2023-09-26

当我点击指针时，我正在尝试缩放地图。当我点击指针时，我还显示了一个信息框。

  function initMap() {
      var uluru = {lat: -25.363, lng: 131.044};   
      var map = new google.maps.Map(document.getElementById('map'), {
               zoom: 4,
               center: uluru   }
               );
     var contentString = 'Info Box';
     var infowindow = new google.maps.InfoWindow({
                          content: contentString   
                        });
      var marker = new google.maps.Marker({
                position: uluru,
                map: map,
                title: 'Uluru (Ayers Rock)'   
                   });   
       marker.addListener('click', function() {
                          infowindow.open(map, marker);   
                            }); 
             }

现在我想缩放当我点击指针的同时它会显示信息框。

谢谢你的帮助。谢谢你。

marker.addListener('click', function() {
  infowindow.open(map, marker);             
  map.setCenter(this.position);
  map.setZoom(5);
 });

演示小提琴:http://jsfiddle.net/mzu2qte5/3/

给你，伙计…我还将它封装在自己的模块中。

var MapModule = (function(){
    var map = null;
    var marker = null;
    function _initMap() 
    {
        var uluru = { lat: -25.363, lng: 131.044 };   
        map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: uluru   
        });
        var contentString = 'Info Box';
        var infowindow = new google.maps.InfoWindow({
            content: contentString   
        });
        marker = new google.maps.Marker({
            position: uluru,
            map: map,
            title: 'Uluru (Ayers Rock)'   
       });   
        marker.addListener('click', function() {
                infowindow.open(map, marker);             
                map.setCenter(this.position);
                map.setZoom(9);
            });
        });
    }
    return{
        initMap: _initMap()
    };
})();
MapModule.initMap;

或者，试试这个…

    marker.addListener('click', function() {
            infowindow.open(map, marker);             
            map.setCenter(this.position);
            map.setZoom(9);
        });
    });