谷歌地图缩放点击指针

时间:2015-10-22 08:03:47

标签: javascript html google-maps google-maps-api-3

我在点击指针时尝试缩放地图。当我点击指针时,我也会显示一个信息框。

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

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

感谢您的帮助。谢谢。

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

你在这里交配......我也把它封装在自己的模块中。

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