Javascript 谷歌地图，为ZoomControl选项位置添加边距

我有以下代码来控制页面上谷歌地图的选项。我想将边距顶部添加到缩放控制选项，因为它当前位于我添加到地图的元素后面，该元素需要位于地图的右上角。我尝试添加我自己的自定义元素，就像我在其他问题上看到的一样，但不适用于我当前的设置，执行以下操作，出于任何原因将控件置于顶部和中心

// create custom div to add to zoom controls
var controlDiv = document.createElement('div');
controlDiv.className = 'controlDiv';
controlDiv.index = -1;

// default options
var options = $.extend(true, {
  gmap: {
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: false,
    streetViewControl: true,
    overviewMapControl: false,
    fullscreenControl: false,
    zoomControlOptions: {
      position: [google.maps.ControlPosition.RIGHT_TOP].push(controlDiv)
    },
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
    }
  },
  placesSelector: '.map-places'
}, overrides);

// create basic map
var map = this.map(options);

---

您不能这样做，但您可以轻松创建自己的缩放控件，并将其放置在您想要的任何位置。简单的概念证明：

var映射； 函数ZoomControl控件div，映射{ //为自定义缩放控件创建div和样式 controlDiv.style.padding='5px'； //为控件包装器设置CSS var controlWrapper=document.createElement'div'； controlWrapper.style.backgroundColor='white'； controlWrapper.style.borderStyle='solid'； controlWrapper.style.borderColor='gray'； controlWrapper.style.borderWidth='1px'； controlWrapper.style.cursor='pointer'； controlWrapper.style.textAlign='center'； controlWrapper.style.width='32px'； controlWrapper.style.marginTop='50px'； controlDiv.appendChildcontrolWrapper； //为缩放设置CSS var zoomInButton=document.createElement'div'； zoomInButton.style.fontSize='3em'； zoomInButton.style.lineHeight='1em'； zoomInButton.innerHTML='+' controlWrapper.appendChildzoomInButton； //为zoomOut设置CSS var zoomOutButton=document.createElement'div'； zoomOutButton.style.fontSize='3em'； zoomOutButton.style.lineHeight='1em'； zoomOutButton.innerHTML='-' controlWrapper.AppendChildZootButton； //设置单击事件侦听器-缩放 google.maps.event.AddDomainListenerZoomInButton，“单击”，函数{ map.setZoommap.getZoom+1； }; //设置单击事件侦听器-zoomOut google.maps.event.AddDomainListenerZoomoutButton“单击”功能{ map.setZoommap.getZoom-1； }; } 函数初始化{ var mapDiv=document.getElementById'map-canvas'； 变量映射选项={ 缩放：12， 中心：新google.maps.LatLng41.850033，-87.6500523， /*禁用默认UI小部件*/ disableDefaultUI:true } map=new google.maps.mapdiv，mapOptions； //创建DIV以保存控件并调用ZoomControl构造函数 //经过这个分区。 var zoomControlDiv=document.createElement'div'； var zoomControl=新的zoomcontrolzoomcontrolldiv，映射； zoomControlDiv.index=1； 控件[google.maps.ControlPosition.TOP_CENTER].pushzoomControlDiv； } 初始化； 地图画布{ 高度：180像素； }