Question

我已经创建了一个功能，它以谷歌地图为中心，但我需要稍微提高一点，因为我的描述窗口不可见。

这是它的外观：

这是我想看的图片：

这是一个js脚本。

   var address = "{{$restaurant->address}}";
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {

     var latlng = new google.maps.LatLng(-34.397, 150.644);
     var mapOptions = {
       zoom: 17,
       scrollwheel: false,
       styles: styleArray,
       center: latlng
     }
     map = new google.maps.Map(document.getElementById("map"), mapOptions);

     map.setCenter(results[0].geometry.location);
     marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: results[0].geometry.location
    });

     var contentString = "<b style='color:black'>{{$restaurant->address}}</b>"; // HTML text to display in the InfoWindow
     var infowindow = new google.maps.InfoWindow( { content: contentString } );
     infowindow.open( map, marker );
     google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });

     var center;
     function calculateCenter() {
      center = map.getCenter();
     }

     google.maps.event.addDomListener(map, 'idle', function() {
      calculateCenter();
     });

     google.maps.event.addDomListener(window, 'resize', function() {
      map.setCenter(center);
     });

  }else {
       alert("Geocode was not successful for the following reason: " + status);
  }
});

Answer 1

根据标记的位置和信息窗口的尺寸（据我所知），没有辅助功能可以使地图居中。

如果您的infoWindow具有固定尺寸，则使用panBy方法可能是实现所需内容的最简单方法。

来自the API reference：

panBy(x:number, y:number)

按给定距离（以像素为单位）更改地图中心。如果距离小于地图的宽度和高度，则过渡将平滑地动画。请注意，地图坐标系从西向东（对于x值）和从北向南（对于y值）增加。

一个简单的例子：

// Use the property `center` to define the initial center of the map
var mapOptions = {};

// Render the map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Transition the center of the map by 0 pixels to the east, 
// and n pixels to the south, where n is half the height of
// the infoWindow
map.panBy(0, n);

如果infoWindow具有动态尺寸，则您必须先查询其尺寸，然后使用panBy方法。

这对你有用吗？

如何让谷歌地图不居中，但稍微高一点？

1 个答案: