我正在尝试将图像对齐到 google map div 的中心。
基本上这张图片是为了应用与 Uber 相同的功能。就像有一个始终与 map 中心对齐的 float 标记一样。 问题是我可以修复它以适用于一种 map 尺寸。但是如果更改 map div 的大小，则图像不再指向 map 的中心。
以下是它在优步中的运作方式。 https://youtu.be/U9A86Nh75xQ?t=36s
这是我的示例正文代码
<body>
<div id="map"></div>
<div id="static-img">
<img src="http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png">
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 28.625789, lng: 77.0547899},
zoom: 8
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
这是CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#static-img{
position:absolute;
top:44%;
width:100%;
text-align:center;
}
这是一个测试jsfiddle https://jsfiddle.net/pyu8rqso/1/
我应该如何解决这个问题？
最佳答案
如果你想让标记总是在 map 中居中，你可以使用Google Maps Api实现这一目标。
您可以通过设置一个 event 来做到这一点drag 事件的监听器，您可以创建一个函数来更新拖动时的 marker 坐标。 (您可能还想为 scroll 和其他事件创建监听器)
function markPos() {
marker.setPosition( map.getCenter() );
}
google.maps.event.addListener(map, 'drag', function() {
markPos();
});
如果出于某种原因你想居中对齐 html 元素，在 #map 元素之上；你原来的 fiddle 很接近，但最好先通过 position 将你的元素居中(就像你所做的那样)，但添加这些规则/值以获得父元素的真正中心:
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
This will vertically center your child element properly ，但请注意父元素的中心并不总是代表 map 的中心。您可以通过添加 that top: 44% rule you had in there 来更改它.
关于javascript - 将图像对齐到谷歌地图 div 的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36391715/