7

谷歌 Javascript 地图 API 3.5

基本问题是，如果您在俯视图中有一个位于固定地标（如消火栓）上方的标记，那么您切换到 45 度视图，则标记不再显示在消火栓顶部。反之亦然（将标记放置在 45 度视图中，然后切换到头顶）。

重现：

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

- 创建一个带有可拖动标记的基本谷歌地图网页。在具有 45 度图像的区域上具有初始标记/地图位置：（尝试：33.501472920248354，-82.01948559679795）。我不确定它是否会在所有区域都显示此问题，因此请尝试从该点开始。

- 确保您在接近最大值和卫星视图中放大

- 关闭 45 度图像

- 固定点上的位置标记（人行道拐角处、房屋烟囱等）

-更改为 45 度视图。

- 请注意，标记位置已移动

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

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

为什么它是一个问题：不知道该信任什么。哪个视图显示该标记的准确位置？无法创建允许人们在一个视图中放置标记并在另一个视图中查看它们的网页。主要矛盾。

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. 将这些像素位置转换为有效的 latlng 位置；
  5. 观察tilt方法是否从0到45，反之亦然，并通过设置新坐标采取相应的行动。
于 2012-04-22T15:32:11.500 回答
1

您可能要做的就是破解它。就谷歌而言，可能没有错误，并且地图上的点“出现”在不同的地方，因为 45 度视图改变了地图上的视角，因此离散的纬度将如何物理地出现在地图上（缩放变化时可能会发生类似的事情）。您需要做的是弄清楚视图之间的增量是什么，然后挂钩“tilt_changed”事件并适当地调整您的标记。学习 delta 的一种好方法是挂钩“dblclick”事件，以提醒您鼠标所在的 latlng：

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 :)

然后 dblclick 标记“应该”的屏幕并创建一个相应地调整标记的函数。从理论上讲，您可以定义一个适用于任何角度的函数，这样您所要做的就是将每个标记的位置传递给tilt_changed 上的函数。让我知道这对你来说是否是一个好的开始:)

于 2012-04-16T13:05:29.037 回答