Question

在Google地图中，我需要移动底部中心的Google徽标。我怎样才能让它位于Botton左边。

我认为我需要jQuery才能做到这一点，但无法弄明白。

<div style="margin-left: 5px; margin-right: 5px; margin-bottom: 17px; z-index: 1000000; position: absolute; bottom: 0px; left: 921px;">
    <a style="position: static; overflow: visible; float: none; display: inline;" target="_blank" href="http://maps.google.com/maps?ll=53.648789,-8.514405&z=6&t=m&hl=en-GB&gl=US&mapclient=apiv3" title="Click to see this area on Google Maps">
        <div style="width: 52px; height: 20px; cursor: pointer;">
            <img style="position: absolute; left: 0px; top: 0px; width: 52px; height: 20px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://maps.gstatic.com/mapfiles/api-3/images/google_dark.png" draggable="false">
        </div>
    </a>
</div>

希望有人可以帮忙解决这个问题。

Answer 1

我有类似的问题。我在附近的地点搜索表单中显示结果，并将结果放在一个覆盖地图的半透明容器中。谷歌徽标被这个容器部分遮挡了，因为害怕违反ToS，我想通过容器的宽度来抵消它。这就是我的所作所为：

我通过标题来定位元素，因为它没有类或任何东西。

$('[title="Click to see this area on Google Maps"]')

重要的是要注意除非我等待地图完成加载，否则找不到该元素。我已经在使用＆＃34; tilesloaded＆＃34;事件所以我编写了一个名为moveGoogleLogo（）的函数，该函数在触发该事件后执行。

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){

    // Move Google logo
    moveGoogleLogo();

});


function moveGoogleLogo(){
    var container = $('#my-overlay-container')
    $('[title="Click to see this area on Google Maps"]')
    .closest('div').css('left', container.outerWidth()+'px');
}

我注意到元素本身被包裹在div中，所以我使用nearest（）来获取div，然后将容器的宽度添加为左值。

这对我有用！我希望这有助于其他人。我意识到，如果他们在更高版本中更改标题，则代码必须更新，但无论如何。对我来说，这是一个比重新创建元素更好的解决方案。

<强>更新

我上面的解决方案没有按照我想要的方式工作，因为地图改变后，徽标会重新定位。我最终做的是用.clone（）克隆元素并隐藏原始元素。这似乎完成了工作。

Answer 2

我用它来重新定位它：

function GoogleLogoControl(controlDiv, map) {
// Set CSS for the control div
var controlUI = document.createElement('div');
controlUI.style.cursor = 'pointer';
controlUI.style.width = '52px';
controlUI.style.height = '20px';
controlUI.title = 'Click to see this area on Google Maps';
controlDiv.appendChild(controlUI);

// Set CSS for the control image
var controlImage = document.createElement('img');
controlImage.src = 'https://maps.gstatic.com/mapfiles/api-3/images/google_dark.png';
controlImage.style.width = '52px';
controlImage.style.height = '20px';
controlUI.appendChild(controlImage);

google.maps.event.addDomListener(controlUI, 'click', function() {
window.open('http://maps.google.com/maps?ll=53.648789,-8.327637&z=6&t=m&hl=en-GB&gl=US&mapclient=apiv3')
});
}

在函数initialize（）中我添加了：

// Add Google Logo to Bottom Right Corner as it was remove from Bottom Center using CSS
var googlelogoControlDiv = document.createElement('div');
var googlelogoControl = new GoogleLogoControl(googlelogoControlDiv, map);

googlelogoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(googlelogoControlDiv);

如何将Google Maps徽标移动到地图的左下角

2 个答案: