google-maps - map 错误 : Markers shifting all over the place when switching view angles. 修复了吗？

Question

谷歌 JavaScript map API 3.5

基本问题是，如果您在俯 View 中有一个标记在固定地标上，例如消防栓，那么您切换到 45 度 View ，标记不再显示在消防栓顶部。反之亦然(将标记放置在 45 度 View 中，然后切换到头顶)。

重现:

在此处查看示例:www.zingjet.com/maptest.html

- 创建一个带有可拖动标记的基本 Google map 网页。在具有 45 度图像的区域上具有初始标记/ map 位置:(尝试:33.501472920248354，-82.01948559679795)。我不确定它在所有领域都显示了这个问题，所以尝试从这一点开始。

- 确保您放大到最大和卫星 View 附近

- 关闭 45 度图像

- 固定点上的位置标记(人行道的角落，房子的烟囱，
等等)

- 更改为 45 度 View 。

- 请注意标记位置已移动

- 尝试旋转 45 度，看看标记如何相对于
图像上的原始点。

- 切换回头顶，标记位于原始位置。

为什么会出现问题 :
不知道该相信什么。哪个 View 显示该标记的准确位置？无法创建允许人们在一个 View 中放置标记并在另一个 View 中查看它们的网页。主要不一致。

Answer 1

更新 2

• demo: http://bit.ly/IhpeBu

        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);
                }
            });
        }

备注:
上面的代码工作如下:

应用自定义叠加层以使用；google.maps.MapCanvasProjection object doc

找到标记的像素位置；

添加到 y ( top = lng ) 45 度(缩放 20 时为 45 像素)加上 20标记图标高度的像素(x 始终保持不变，因为度数变化是一种简单的视错觉；))；

将这些像素位置转换为有效的纬度位置；

观察 tilt方法更改自 0至 45反之亦然，并通过设置新坐标采取相应的行动。