Question

我正在尝试将图片与Google地图div的中心对齐。

这个图像基本上是应用与优步相同的功能。就像拥有一个始终与地图中心对齐的浮动标记一样。问题是我可以修复它以适用于一个地图大小。但是如果改变了地图div的大小，那么图像就不再指向地图的中心。

这里是如何在超级网站上运作的。 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/

我该如何解决这个问题？

Answer 1

如果您想让始终的标记在地图中居中，您可以使用Google Maps Api来实现这一目标。

您可以通过为drag事件设置event侦听器来执行此操作，并且可以创建一个更新拖动marker坐标的函数。（您可能还想为scroll和其他事件创建侦听器）

<强> EXAMPLE

function markPos() {
    marker.setPosition( map.getCenter() );
}

google.maps.event.addListener(map, 'drag', function() {
    markPos();
});

如果出于某种原因，您希望将html元素居中对齐#map元素;你的原始小提琴很接近，但最好先将position它放在你的元素中（就像你已经完成的那样），但是添加这些规则/值以获得父元素的真正中心：

top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

This will vertically center your child element properly，但注意父元素的中心并不总是代表地图的中心。您可以通过添加that top: 44% rule you had in there来更改它。

将图像对齐到谷歌地图div的中心

1 个答案: