Geek Answers Handbook

Map error: markers move around when switching viewing angles. Fix?

Google Javascript Maps API 3.5

The main problem is that if you have a marker that is above a fixed landmark, like a fire hydrant in the top view, then you switch to 45 degrees, the marker no longer shows on top of the hydrant. And vice versa (place the marker in a 45-degree view, then switch to overhead).

Playback:

See an example here: www.zingjet.com/maptest.html

-Create a basic Google Maps webpage using a drag-and-drop marker. With the initial location of the marker / map above the area with 45 degrees of the image are available: (try: 33.501472920248354, -82.01948559679795). I'm not sure if this shows this problem for all areas, so try this moment to get started.

-Make sure you're close to maximum and in satellite view

-Include 45-degree images

- location marker on a fixed point (sidewalk angle, house chimney, etc.)

-Change up to 45 degrees.

-Note that the marker position is shifted

- Rotate the rotation 45 degrees and see how the marker moves relative to the original point in the image.

- Switch to the top and top marker in the starting place.

: , . ? -, . .

+5
2

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

: :

  • ; google.maps.MapCanvasProjection object doc
  • ;
  • y (top = lng) 45 (45 20) 20 (x , - ;) );
  • latlng;
  • , tilt 0 45 , .
+3

, , , . google, , , , "" , 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 :)

dblclick , ", , . , , , , tilt_changed. , :)

+1

More articles:


All Articles