Point
Pointクラスは、位置のインスタンスを作成するためのクラスです。作成したインスタンスは、例えば、マーカーのラベルを表示する位置などを調整する時の値として利用できます。
構文
パラメータ
x
number
X座標を表す数値。
y
number
Y座標を表す数値。
返り値
Point
X座標とY座標の情報を含む、位置のインスタンス。
デモ
マーカーに表示される、情報ウィンドウの位置を設定します。このマーカーの画像は50x50で、最下部の中央が起点の座標(0,0)となります。つまり、X軸は動かさず、Y軸を-50だけズラせば、情報ウィンドウはちょうど、画像の最上部真ん中に表示される計算になります。引数の値を調整して、どのように変わるかを確認してみましょう。
var point = new google.maps.Point( 0, -100 ) ;
var marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 35, 139 ) ,
icon: {
url: "./marker.png" ,
scaledSize: new google.maps.Size( 200, 200 ) ,
} ,
anchorPoint: point ,
} ) ;
サンプルコード
インスタンスの作成
var point = new google.maps.Point( 0, -100 ) ;
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px ;
height: 600px ;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
<script>
var mapDiv = document.getElementById( "map-canvas" ) ;
// Map
var map = new google.maps.Map( mapDiv, {
center: new google.maps.LatLng( 35.71, 139.8107 ) ,
zoom: 11 ,
} ) ;
// Point
var point = new google.maps.Point( 0, -100 ) ;
// Marker
var marker = new google.maps.Marker( {
map: map ,
position: map.getCenter() ,
icon: {
url: "https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Point/marker.png" ,
scaledSize: new google.maps.Size( 200, 200 ) ,
} ,
anchorPoint: point ,
} ) ;
// InfoWindow
var infoWindow = new google.maps.InfoWindow( {
content: "SYNCER" ,
} ) ;
infoWindow.open( map, marker ) ;
</script>
</body>
</html>
プロパティ
名前 | 説明 |
---|---|
x | 位置のx座標を反映する。 |
y | 位置のy座標を反映する。 |
メソッド
名前 | 説明 |
---|---|
equals() | 2つの位置が同じか否かを判定する。 |
toString() | 位置を文字列に変換する。 |
参考
- Google Maps JavaScript API: Point
- Googleの公式リファレンス。