将图像与谷歌地图 div 的中心对齐答案

【问题标题】：Aligning image to the center of a google-map div将图像与谷歌地图 div 的中心对齐
【发布时间】：2016-07-23 08:22:34
【问题描述】：

我正在尝试将图像与谷歌地图 div 的中心对齐。

基本上，这张图片是应用与 Uber 相同的功能。就像有一个始终与地图中心对齐的浮动标记一样。问题是我可以修复它以适用于一种地图大小。但如果地图 div 的大小发生变化，则图像不再指向地图的中心。

这是它在 uber 中的工作方式。 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/

我应该如何解决这个问题？

【问题讨论】：

提供您所指的 uber 功能的示例；没有理由期望人们知道那是什么
这里..youtu.be/U9A86Nh75xQ?t=36s
您可以处理谷歌地图调整大小事件来更新地图上标记的位置。 Check this

标签： javascript css google-maps google-maps-markers

【解决方案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 元素上方；你原来的小提琴很接近，但最好先通过positioning 将元素居中（就像你所做的那样），但添加这些规则/值以获得父元素的真正中心：

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 来更改它。

【讨论】：

通过参考这个答案来修复它。 stackoverflow.com/questions/19327254/…，您的解决方案足够接近。感谢您的帮助。