[解決済み] Google Maps Api v3 - 最寄りのマーカーを探す
2023-02-18 22:26:15
質問
地図をクリックしたとき、最も近いマーカーを見つけるにはどうしたらよいでしょうか? それをするのに役立つapiの関数はありますか?
google map api v3です。
どのように解決するのですか?
まず、イベントリスナーを追加する必要があります。
google.maps.event.addListener(map, 'click', find_closest_marker);
次に、マーカーの配列をループする関数を作成し、その関数で haversine formula を使用して、クリック位置からの各マーカーの距離を計算します。
function rad(x) {return x*Math.PI/180;}
function find_closest_marker( event ) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
for( i=0;i<map.markers.length; i++ ) {
var mlat = map.markers[i].position.lat();
var mlng = map.markers[i].position.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distances[i] = d;
if ( closest == -1 || d < distances[closest] ) {
closest = i;
}
}
alert(map.markers[closest].title);
}
これは、最も近いマーカーを記録し、そのタイトルを警告します。
地図オブジェクトに配列としてマーカーを配置しています。
関連
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み] Android StudioのデバッグモードでSHA-1フィンガープリント証明書を取得する方法を教えてください。
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み】このAPIプロジェクトは、このAPIを使用する権限がありません。このAPIがAPIコンソールで有効になっていることを確認してください。
-
[解決済み】Google Maps API 3 - デフォルト(ドット)マーカーにカスタムマーカー色を付ける
-
[解決済み】Google Maps API v3で複数のマーカーを持つ地図を自動中心化する。
-
[解決済み] Google MapsのURLでlat-lonに移動するには、どのようなパラメータを使用すればよいですか?
-
[解決済み] Google Maps API - 住所の座標を取得する
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] Google Map API V3: マーカーにカスタムデータを追加する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ReferenceError: googleは定義されていません。
-
[解決済み] 住所をGoogleマップのリンクに変換する方法(NOT MAP)
-
[解決済み】このAPIプロジェクトは、このAPIを使用する権限がありません。このAPIがAPIコンソールで有効になっていることを確認してください。
-
[解決済み] Google Mapsのマーカーの色を変更するにはどうしたらいいですか?
-
[解決済み] Google Maps V3 - 指定した境界線に対するズームレベルの計算方法
-
[解決済み] Google Mapsに影響を与えるTwitter BootstrapのCSS
-
[解決済み] GISサービスにおける緯度・経度タプルの記述順の優先度について
-
[解決済み] Google Maps API Key を保護するためにどのような手順を取ればよいですか?
-
[解決済み] Google Maps API v3 で SVG マーカーを使用する方法
-
[解決済み] Google Mapの衛星画像を表示しないようにするには?