Google MAP APIを使っていて、マーカーを中央に固定したかったのですが、マップが動かされる度に
マップのセンター座標取得 → マーカーの座標に代入
というのはなんか処理的に美しくないし、若干とはいえ負荷もかかる。
うまい方法ないかなーと思って探していたら逆転の発想に出会いました。
質問者は以下のように、マーカー座標をマップの方にバインドする、つまり自分も当初考えていた美しくない方法で実装しようとしていたわけですね。
options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
overviewMapControl: false,
zoomControl: true,
draggable: true
};
map = new google.maps.Map(mapContainer, options);
marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
animation: google.maps.Animation.DROP
});
//This line is what makes the Marker stick to the center of the map
marker.bindTo('position', map, 'center');ただ問題点としては、ドラッグイベントが始まって座標のバインド（受け渡し）が発生した後にドラッグイベントが終了してしまうと言うことが挙げられます。
つまりスムーズなスクロールができないわけですね。
ちなみにこの問題は自分も直面しましたが、直接バインドするのではなく、center_changedのトリガーを使用し、一旦新しい変数に座標を代入、更にマーカーの座標にその変数を指定しておけば一応解決。
トリガーについてはこちら → https://developers.google.com/maps/documentation/javascript/events
それより、回答の一つに面白いものがありました。
A different approach, that did not use a real
google.maps.Marker:after the map has been initialized, inject a div into the map-container, give it a className(e.g.
centerMarker), the further things will be done via CSS:.centerMarker{ position:absolute; /*url of the marker*/ background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat; /*center the marker*/ top:50%;left:50%; z-index:1; /*fix offset when needed*/ margin-left:-10px; margin-top:-34px; /*size of the image*/ height:34px; width:20px; cursor:pointer; }
Markerオブジェクトにこうどうするのではなく、「背景にマーカーの画像を設定した適当なDiv」を用意し、CSSで中央に表示させるという手法。
なるほど、中央に固定するだけならそもそもGoogle MAPの要素使わなくてもいいし、座標もマップの方のgetCenterメソッドで取得できますね。
注意点としては、中央にもってくるのはマーカーそのものではなく、マーカーの先っぽであるという点です。
ただ単にマーカーが中央だと見た目（ちょっと下側を指してる）と実際の座標（ど真ん中）のズレが発生するのでmargin等でしっかり調整しましょう。
こういう柔軟な発想、とても大事ですね。
文鳥もそう思います。
IT企業でフロントエンドエンジニアのアレとして日々奮闘しております。
ギターとかバイオリンとか弾きます。
音楽と紅生姜が好きです。
SessionGOを開発・運営しています。
