/
246.txt
132 lines (90 loc) · 5.98 KB
/
246.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
[19] [DFN[Google Maps]] は、 [[Google]] の[[地図]]サービスです。
[20] 単独の[[Webサービス]]として提供されている他、 [[Web API]]
を通じて多くの [[Webサイト]]に埋め込まれて[[地図]]等の機能を提供しています。
* API を使う
** 地図の表示範囲を指定したい
[6] Map オブジェクトの [CODE[panTo]] メソッドで指定できます。
** 線の一部区間だけ色を変えたい
[3] Polyline を区間ごとに分割してそれぞれの色を指定すれば良い。
** 線に縁取りしたい
[4] 太い Polyline の上に細い Polyline を重ねるしかない?
** 線に沿って文字を描きたい
[7] 難しそう。
** Poyline に tooltip を指定したい
[8] 無理そう。
[13] mouseover で地図を含む要素に title 属性を設定して、
mouseout で元に戻せばできるかも?
** マーカーをドラッグしたとき、ドロップ先をいくつかの座標候補に限定させたい
[5] API にそういう機能は無さそう。 drag イベントでドラッグ位置の直近の座標を自分で計算して Marker 位置を設定すれば良い。
** 右クリックでメニューを表示したい
[9] 右クリックされたことは [CODE[rightclick]] イベントで取得できます。
[11] 地図上の[[クリック]]も標準状態では地図の外側の [[DOM]] [[要素]]の[[イベント]]として[[伝播]]しますが、
[[Google Maps]] の [CODE[click]] や [CODE[rightclick]] のイベントにコールバック関数を登録していると、
地図外には伝播しなくなる (場合もある) ようです。
[10] コールバック関数の引数の [CODE[MouseEvent]] オブジェクトは、
ドキュメントによると [CODE[latLng]] プロパティーしかありませんが、
実際には ([CODE[Map]] オブジェクトの場合) [CODE[pixel]] プロパティーがあって、そこから [CODE[x]] と [CODE[y]]
の座標が取得できます。 (ドキュメントにないのですが、世間ではまま使われているようです。)
[CODE[Map]] 以外のオブジェクトでの右クリックだと [CODE[pixel]]
は利用できないことがあります。
[12] より安全・確実に地図画面上の座標を取得したいときは、少し面倒ですが、 OverlayView から
getProjection で取得できるオブジェクトを使うと良いようです。
(Map の getProjection は少し違っていて、同じことはできないようです。)
[FIG[
[PRE(js code)[
var Overlay = function () { };
Overlay.prototype = new google.maps.OverlayView();
Overlay.prototype.onAdd = function () {
};
Overlay.prototype.draw = function () {
};
Overlay.prototype.onRemove = function () {
};
var overlay = new Overlay;
overlay.setMap (map);
object.addListener ('rightclick', function (ev) {
var xy = map.getProjection ().fromLatLngToContainerPixel (ev.latLng);
console.log (xy.x, xy.y);
});
]PRE]
]FIG]
** 線の近く数ピクセルのクリックでも線をクリックしたことにしたい
[14] 無理そう。 Map の [CODE[click]] で自力でがんばればできる。
** 座標により細かくマウスカーソルを制御したい
[15] 無理そう。 Map の [CODE[mousemove]] で自力でがんばればできる。
** 標準で表示される地物の表示にマウスイベントを奪われる
[16] 建物や山頂などの表示 (アイコンやラベル) があると、そちらに[[クリック]]などの[[マウスイベント]]が奪われてしまいます。
[17] [CODE[OverlayView]] を使えば、 [CODE[floatPane]] でそれよりも上面にレンダリングはできますが、なぜか[[マウスイベント]]と[[カーソル]]表示は奪われてしまいます。
(なお、 [CODE[floatPane]] の説明に情報窓よりも上と書いてありますが、嘘っぽく、それよりは下になります。)
[18] これを避けるには非表示にするしかなさそうです。
[EG[
[PRE[
new google.maps.Map (element, {
styles: [
{featureType: "poi", elementType: "all", stylers: [{visibility: "off"}]},
{featureType: "landscape", elementType: "all", stylers: [{visibility: "off"}]},
],
});
]PRE]
]EG]
* 関連
[21] [[Google Earth]] とは別製品となっているようです。
* メモ
[2] [CITE@en[Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers]] ([TIME[2016-06-01 10:39:27 +09:00]] 版) <https://developers.google.com/maps/documentation/javascript/reference>
[FIG(quote)[
[FIGCAPTION[
[1] [CITE@ja[Google Japan Blog: Google マップの不動産検索について]]
([TIME[2016-03-02 13:52:41 +09:00]] 版)
<http://googlejapan.blogspot.jp/2011/01/google_27.html>
]FIGCAPTION]
> 2009 年 7 月に米国で、2010 年 8 月に日本でも開始した Google マップの不動産検索機能は、「多くの物件情報を一度に地図上に表示する」というコンセプトを非常に高く評価していただきました。しかしながら、実際のサービスの利用増加にはなかなか繋がらず、様々な側面から検討した結果、断腸の思いではありますが、本年 2 月 11 日をもって、サービスを停止することになりました。サービスの停止は、日本を始め、今日同サービスを提供しているすべての地域(米国、オーストラリア、ニュージーランド、英国)が対象となります。
]FIG]
[FIG(amazon)[
Google Maps
]FIG]
[22] [CITE@en[Too Many Markers! | Google Maps APIs | Google Developers]]
( ([TIME[2016-07-13 06:14:51 +09:00]]))
<https://developers.google.com/maps/articles/toomanymarkers>
[23] [CITE@en[googlemaps/js-marker-clusterer: A marker clustering library for the Google Maps JavaScript API v3.]]
( ([TIME[2016-07-22 11:59:38 +09:00]]))
<https://github.com/googlemaps/js-marker-clusterer>