javascript - 控制定位

Question

我有一个控件，我正在使用谷歌地图 v3 添加到 map 中，目前它看起来像这样:

看到向右的箭头是如何伸出到一边的吗？

我目前正在使用以下代码添加它:

// Create a div to hold the control.
var controlDiv = document.createElement('div');
var controlUI = document.createElement('button');
controlUI.id = "out";
controlUI.innerHTML = "<i class='icon-chevron-right'></i>";
controlDiv.appendChild(controlUI);

Maps.map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);

它有 css...

#out {position:relative;top:5px;right:0;float:right;border:1px #aaa solid;border-left:0;padding:2px 4px;-webkit-border-top-right-radius: 2px;-webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px;-moz-border-radius-bottomright: 2px;border-top-right-radius: 2px;border-bottom-right-radius: 2px;}

但是这个位置显然有点不对劲。如何才能使默认控件以自定义控件的方式向下移动？

Answer 1

为了让事情对我自己来说更容易一些，我建议你也这样做，就是将控件移到另一侧，它不会伤害任何人。我相信它看起来好多了。

为此，只需将其添加到您的 map 选项

mapTypeControl: false,
panControl:true,
panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl:true,
zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl:true,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},