7

Google Javascript マップ API 3.5

基本的な問題は、俯瞰ビューで消火栓のような固定ランドマークの上にマーカーがある場合、45 度ビューに切り替えると、マーカーが消火栓の上に表示されなくなることです。逆もまた同様です (マーカーを 45 度のビューに配置してから、頭上に切り替えます)。

再現するには：

サンプルはこちら: www.zingjet.com/maptest.html

-ドラッグ可能なマーカーを使用して、基本的な Google マップの Web ページを作成します。45 度の画像が利用可能なエリア上の初期マーカー/マップ位置: (試してください: 33.501472920248354、-82.01948559679795)。すべての領域でこの問題が発生するかどうかはわかりませんので、その点から始めてみてください。

- 衛星ビューで最大近くまでズームインしていることを確認してください

- 45 度の画像をオフにする

- 定点上の位置マーカー (歩道の角、家の煙突など)

-45 度ビューに変更します。

- マーカーの位置がずれていることに注意してください

- 45 度回転させて、マーカーが画像上の元のポイントに対してどのようにシフトするかを確認します。

-頭上に戻ると、マーカーは元の位置にあります。

なぜそれが問題なのか: 何を信頼していいのかわからない。そのマーカーの正確な位置を示すのはどのビューですか? あるビューでマーカーを配置し、別のビューでそれらを表示できる Web ページを作成することはできません。主な矛盾。

4

2 に答える 2

3

更新 2

        var map, marker, overlay, latlng, zoom = 20;
        function initialize() {
            latlng = new google.maps.LatLng(33.501472920248354, -82.01948559679795);
            var myOptions = {
                zoom : zoom,
                center : latlng,
                tilt : 0,
                mapTypeId : google.maps.MapTypeId.SATELLITE
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            overlay = new google.maps.OverlayView();
            overlay.draw = function() {
            };
            overlay.onRemove = function() {
            };
            overlay.setMap(map);
            marker = new google.maps.Marker({
                position : latlng,
                map : map,
                draggable : true,
                title : "Hello World!"
            });

            google.maps.event.addListener(map, 'zoom_changed', function() {
                zoom = map.getZoom();
            });

            google.maps.event.addListener(map, 'dragend', function() {
                overlay.setMap(map);
            });

            google.maps.event.addListener(marker, 'dragend', function(evt) {
                var tilt = map.getTilt();
                latlng = new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng());
                if(tilt === 45) {
                    var projection = overlay.getProjection();
                    var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition());

                    var delta = 0;
                    switch(zoom) {
                        case 20:
                            delta = 45;
                            break;
                        case 19:
                            delta = 12;
                            break;
                        case 18:
                            delta = 4;
                            break;
                    }
                    latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y + delta )));
                }
            });

            google.maps.event.addListener(map, 'tilt_changed', function() {
                var tilt = map.getTilt();
                if(tilt === 45) {
                    var delta = 0;
                    switch(zoom) {
                        case 20:
                            delta = 65;
                            break;
                        case 19:
                            delta = 32;
                            break;
                        case 18:
                            delta = 16;
                            break;
                    }
                    var projection = overlay.getProjection();
                    var latlng2pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
                    var pixel2latlng = projection.fromContainerPixelToLatLng(new google.maps.Point(latlng2pixel.x, (latlng2pixel.y - delta )));
                    marker.setPosition(pixel2latlng);
                } else {
                    marker.setPosition(latlng);
                }
            });
        }

注: 上記のコードは次のように機能します。

  1. カスタム オーバーレイを適用して使用します。 google.maps.MapCanvasProjection object 文書
  2. マーカーのピクセル単位の位置を見つけます。
  3. y( top = lng ) に 45 度 (ズーム 20 で 45 ピクセル) とマーカー アイコンの高さのピクセルを追加し20ます (度数の変化は単純な目の錯覚であるため、x は常に変化しません ;) );
  4. それらのピクセル位置を有効な緯度位置に変換します。
  5. メソッドが からへ、またはその逆にtilt変更されるかどうかを観察し、それに応じて新しい座標を設定します。045
于 2012-04-22T15:32:11.500 に答える
1

おそらくあなたがしなければならないことは、それをハッキングすることです。Google に関する限り、おそらくエラーはなく、45 度のビューによって地図上の遠近法が変わるため、地図上のポイントは別の場所に「表示」されます。したがって、個別の緯度経度が地図上に物理的にどのように表示されるか (ズームを変更すると、同様のことが発生する可能性があります)。あなたがする必要があるのは、ビュー間のデルタが何であるかを把握し、「tilt_changed」イベントをフックして、マーカーを適切に調整することです。デルタを学習する簡単な方法の 1 つは、「dblclick」イベントをフックして、マウスがオンになっている緯度を警告することです。

google.maps.event.addDomListener(map, 'dblclick', function(MouseEvent){
        alert(MouseEvent.latLng.lat()+" "+MouseEvent.latLng.lng());
    }); 
// make sure you disable the maps default zoom on double click 
//or choose a different event or it will get annoying :)

次に、マーカーが「あるべき」画面をダブルクリックし、それに応じてマーカーを調整する関数を作成します。理論的には、任意の角度で機能する関数を定義できる可能性があるため、すべてのマーカーの位置を、tilt_changed の関数に渡すだけで済みます。これがあなたにとって良いスタートであるかどうか教えてください:)

于 2012-04-16T13:05:29.037 に答える