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

问题描述:

这是我的Google地图的mapOptions为什么我不能在我的Google地图中移动addressControl?

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

当我在常规的Map视图中时,一切都处于正确的位置。当我使用pegman转到streetView时,我的streetViewAddressControl位于右上角。我知道我必须让自己的选项设置错误。我需要改变以做出这项工作?

使用Control Positioning,大多数控件选项都包含ControlPosition类型的位置属性,该属性指示放置控件的地图上的位置。这些控制的定位不是绝对的。相反,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

您不能设置该controlOption与地图选项,您必须先创建地图,然后访问通过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>

通过 getStreetView()街景并设置选项