画像をGoogleマップのdivの中心に合わせる

Googleマップのdivの中心に画像を配置しようとしています。画像をGoogleマップのdivの中心に合わせる

基本的にこのイメージはUberと同じ機能を適用します。地図の中央に常に配置された浮動マーカーを持つ場合と同様です。問題は、1つのマップサイズで動作するように修正できることです。地図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/

どのように私はグラムべきoこれを修正することについて？あなたはいつもがマップ内の中心に位置するにマーカーを作成したい場合

出典

2016-04-03 Anonymous

あなたが参照しているuber機能の例を提供します。人々がそれが – justinw

here..https：//youtu.be/U9A86Nh75xQ？t = 36s –

であることを人々が知ることを期待する理由はありません。Googleマップのサイズ変更イベントを処理して、地図上のマーカーの位置を更新できます。 [これをチェックする]（http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive） –

、あなたはそれを達成するためにGoogle Maps Apiを使用します。

dragイベントのリスナーをeventに設定し、ドラッグ時にの座標を更新する関数を作成することができます。あなたは#map要素の上、html要素を中央揃えにしたい何らかの理由場合

EXAMPLE

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

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

（あなたも、同様scrollやその他のイベントのためのリスナーを作成したい場合があります）。あなたのオリジナルのフィドルは近いですが、それは（あなたがやったように）それをINGの最初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を追加して変更することができます。

出典

2016-04-04 04:19:25 justinw

この回答を参考にして修正しました。 http://stackoverflow.com/questions/19327254/is-there-a-way-to-fix-a-google-maps-marker-to-the-center-of-its-map-always、あなたの解決策は近かった十分な。助けてくれてありがとう。 –

画像をGoogleマップのdivの中心に合わせる

答えて

関連する問題