Question

以下是我的Google地图的mapOptions。

var mapOptions = {
    addressControlOptions: {
        streetViewAddressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        }
    },
    center: new google.maps.LatLng(40.29343234, -111.87488245),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true,
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    overviewMapControl: true,
    panControl: true,
    scaleControl: true,
    streetViewControl: true,
    zoom: 18,
    zoomControl: true
};

当我在常规地图视图中时，一切都处于正确的位置。当我使用pegman转到streetView时，我的streetViewAddressControl位于右上方。我知道我必须设置错误的选项。我需要做些什么才能使其发挥作用？

Answer 1

您无法使用map-options设置此controlOption，您必须先创建地图，然后通过getStreetView()访问StreetView并通过setOptions()

设置选项

function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.29343234, -111.87488245),
          mapTypeId: google.maps.MapTypeId.SATELLITE,
          mapTypeControl: true,
          mapTypeControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
          },
          overviewMapControl: true,
          panControl: true,
          scaleControl: true,
          streetViewControl: true,
          zoom: 18,
          zoomControl: true
        };
  
        map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
  
        map.getStreetView().setOptions({
          addressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
          }
        });

      }

      google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map_canvas"></div>

Answer 2

使用Control Positioning，大多数控件选项都包含ControlPosition类型的position属性，该属性指示放置控件的地图上的位置。这些控制的定位并不是绝对的。相反，API将通过在给定约束内将它们围绕现有地图元素或其他控件流动来智能地布局控件。

以下示例显示了一个简单的地图，其中所有控件均已启用，位于不同的位置。

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -28.643387, lng: 153.612224},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
fullscreenControl: true
});
}

您可以执行自定义控件，请查看此文档哦如何执行此操作：https://developers.google.com/maps/documentation/javascript/controls#CustomControls

为什么我不能在Google地图中移动addressControl？

2 个答案: