2016-07-16 91 views
0

這是我的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位於右上角。我知道我必須讓自己的選項設置錯誤。我需要改變以做出這項工作?

回答

0

使用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

1

您不能設置該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()街景並設置選項
相關問題