地图错误:在切换视角时,标记会在整个地方移动。 固定?

Google Javascript Maps API 3.5

基本问题是,如果在俯视图中有一个标记位于固定地标上方,例如消防栓,则您切换到45度视野,标记不再显示在消防栓顶部。 反之亦然(将标记置于45度视角,然后切换到开销)。

重现:

请参阅示例:www.zingjet.com/maptest.html

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

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

- 关闭45度图像

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

- 改为45度视野。

- 注意标记位置被移位

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

- 切换回顶部,标记在原始位置。

为什么它是一个问题 :不知道该信任什么。 哪个视图显示了该标记的准确位置? 无法创建允许用户在一个视图中定位标记并在另一个视图中查看标记的网页。 主要不一致。


更新2

  • 演示: 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文档
  • 在标记的像素中查找位置;
  • 添加到y (top = lng)45度(变焦20时为45像素)加上20像素的标记图标高度(x始终保持不变,因为度数变化是一种简单的错觉;));
  • 将这些像素位置转换为有效的位置;
  • 观察tilt方法是否从0改变到45 ,反之亦然,并通过设置新坐标来相应地采取行动。

  • 你将不得不做的事是破解它。 就谷歌而言,可能没有错误,地图上的点“出现”在不同的地方,因为45度视图改变了地图上的视角,因此离散的经纬度将如何物理地出现在地图上当缩放变化时可能会发生类似的事情)。 你需要做的是找出视角之间的差异,然后钩住“tilt_changed”事件并适当调整标记。 学习三角洲的一个好方法是钩住“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函数传递每个标记的位置。 让我知道这对你是一个好的开始:)

    链接地址: http://www.djcxy.com/p/58853.html

    上一篇: Maps bug: Markers shifting all over the place when switching view angles. Fix?

    下一篇: No stack allocation whole program compilation?