javascript - グーグルマップ上でマウスカーソルに最も近い緯度/経度の場所を見つける方法

Question

マーカーがたくさんあります。

左側には、グーグルマップ上の実際のマーカーのマーカー抽象化のリストがあります。

ポリラインを使うことにしました

   var flightPlanCoordinates = [
    new google.maps.LatLng(near_cursor_lat, near_cursor_lon),
    new google.maps.LatLng(marker_lat, marker_lon)
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

ユーザーが左側のマーカー抽象化ボックスにマウスを向けると、マーカー抽象化から実際のマーカーに至る線が地図上に表示されます。STARTING POINT（画像の赤い点）以外はすべて持っています

マウスが左側のボックスに向けられているときに、マウスポインタの横にある開始緯度/経度を見つけるにはどうすればよいですか？

詳細：PERSON1と表示されているボックスにマウスを向けると、最初の赤い点の座標が必要になります。PERSON2と表示されているボックスにマウスを向けると、2番目の赤い点の座標が必要になります。等々。トリック部分があります-左のボックスはグーグルマップdivの外にあります。さらに、PERSONSのあるボックスが多数ある場合、左側のdivでそれらの人物を上下にスクロールできるため、人物ボックスと赤い点の間の垂直方向の相関関係は動的です。

理論的には、ボックスの1つをポイントするとトリガーされるイベントが必要だと思います。さえ発射されたとき、私は上からマウスポインタまでのピクセル単位の垂直距離を測定する必要があります。次に、垂直距離がある場合、Googleマップで同じ垂直距離を測定し、地図上のそのポイントを緯度/経度座標で取得するアクションを実行する必要があります。

ここに画像の説明を入力してください

score 1 · Accepted Answer

これはあなたの質問への答えになるはずです：

以下の投稿のように、マーカーを使用して（人）を表し、リスナーonMouseOverを追加する必要があります。

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

リスナーでオーバーレイを使用して、投影とピクセル座標を取得します。

google.maps.event.addListener(marker, 'mouseover', function() {
    var projection = overlay.getProjection(); 
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    // use pixel.x, pixel.y ... (after some rounding)
});

コピー元： Google MapsV3APIマーカーのマウスオーバーでのマウスカーソルの位置の取得

score 1 · Accepted Answer

@MehdiKaramoslyの答えはかなり的確です。

上記を少しだけ進めて、表示されているマップの一部ではない要素の緯度を取得するには（マップがそこに表示されている場合）、イベントページX/Yを次の行に渡すことができます。

projection.fromLatLngToContainerPixel(marker.getPosition());

そのようです：

var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX,e.pageY));

私は非常に基本的な例をhttp://tinkerbin.com/p30yEXqHに置きました

マップの外側の任意の場所をクリックすると（これは、マップをオーバーレイするdivをクリックするのと同じです）、コンソールログに、クリックした場所のlat / lngが表示されます（表示されていない場合でも）。マップスペース）、ログに記録されます。

乾杯、

C。

score 1 · Accepted Answer

このコードの作業例で更新JsFiddleで2番目の更新地図ウィンドウまたはマウスオーバーマップをクリックして開き、リストを強調表示する両方の方法の例

私が理解しているように、あなたが抱えている問題は次のとおりです。

人はマップとは別にdivにリストされています
人物には、地図上で緯度と経度が関連付けられています
マップには、緯度経度を使用してマーカーが付いている人の位置が表示されます（dbなどに保存される場合があります）
あなたはそれが欲しいので、人々は地図上で人をハイライトしたり、マウスを上に置いてリストしたりすることができます。

マップ上またはリストから緯度/経度を利用できる場合は、それらを相互に関連付ける必要があります。

解決策はこのようなものですが、このマッピングを実現する方法はたくさんあります

人がリストされているあなたのdivで。人物がその要素にカーソルを合わせたときに、各人物要素にdata-mapid属性を挿入し、それを強調表示して、そこからdata-mapidを取得します。
マップ上でマーカーをレンダリングするときに、パラメーターdata-mapidまたは同じ値を持つ他の何かを追加で渡すことができ、マップ上でハイライト機能を使用することもできます。

`jQuery("#gmap3ul li[data-gb='plist']").each(function(){
           elemtopush = {
                        lat:jQuery(this).attr("data-lat"), 
                        lng:jQuery(this).attr("data-long"), 
                        data:{
                            "ht":jQuery(this).html(),
                            "id":jQuery(this).attr("data-mapid")
                        }
                    };
                    ulmarkerspgb.push(elemtopush);
                });`

上記のコードでは、マップに表示するhtmlとdata-mapidとしてのidがあります。これで、このmapidはperson1 person2などになり、リストを使用してdivに関連付けることができます。私はulとliを使用してそれらをdivにリストしています。

マーカーイベントの上にマウスを置くと、次のようなことができます

mouseover: function(marker, event, data)
                                            {
                                                clearalllist();
                                                var listelement = jQuery("td[data-mapid='"+data.id+"']");
                                                jQuery(listelement).attr('style','background-color:#ccc');
                                                var map = jQuery(this).gmap3('get'),
                                                infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
                                                    if (infowindow){
                                                        infowindow.open(map, marker);
                                                        infowindow.setContent(data.ht);
                                                        google.maps.event.addListener(infowindow, 'closeclick', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                        google.maps.event.addListener(infowindow, 'close', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });

                                                    } else {
                                                        jQuery(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data.ht}});
                                                        infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
                                                        google.maps.event.addListener(infowindow, 'closeclick', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                        google.maps.event.addListener(infowindow, 'close', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                    }
                                            }

私がコピーして3つの場所から貼り付けた冗長なコードがたくさんあるので、あなたはそれからあなたが望むものを手に入れることができるかもしれません。

これにより、マップをリストにリンクし、リストをマップにリンクさせることができます。上の2番目の更新を参照するか、このJSFiddleの例をクリックしてください。上部のリストをクリックするとマップウィンドウが開き、マップアイコンの上にマウスを置くとリストが強調表示されます。

これにより、jsでlat longをハードコーディングするのではなく、リストを介してマップにデータが入力されます。

javascript - グーグルマップ上でマウスカーソルに最も近い緯度/経度の場所を見つける方法

3 に答える 3

Related

Reference