將圖像對齊到Google Map div的中心

Question

我正在嘗試將圖像對齊到Google地圖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/

我該如何解決這個問題？

Answer 1

如果您想使標記始終位於地圖的中心，則可以使用Google Maps Api來實現。

您可以通過為drag事件設置事件偵聽器來做到這一點，並且可以創建一個在拖動時更新marker坐標的函數。 （您可能還希望為scroll和其他事件創建偵聽器）

例

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%);

這將使子元素正確地垂直居中，但請注意 ，父元素的中心並不總是代表地圖的中心。 您可以通過添加top: 44%規則來更改它。

將圖像對齊到Google Map div的中心

問題描述

1 個解決方案

解決方案1
0 2016-04-04 04:19:25

將圖像對齊到Google Map div的中心

問題描述

1 個解決方案

解決方案1 0 2016-04-04 04:19:25

解決方案1
0 2016-04-04 04:19:25