拖动后,Google地图标记会消失

时间:2013-12-05 14:18:34

标签: javascript jquery google-maps twitter-bootstrap google-maps-api-3

当我将标记移动到我的地图顶部并且不在视野中时(见下图),它会获得高不透明度,使标记接近不可见。

这个错误只发生在Safari中,我真的不知道可能导致这种情况的原因。

Image showing marker while doing move

Image showing marker after move ended with opacity bug

如果仔细观察第二张图像,可以看到标记。

    var myMarker = new Array();

$(function () {

    latitude = 59.3294;
    longitude = 18.0686;


    var mapOptions = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 4,
        disableDefaultUI: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }

        map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

        var id = 1;

        var image = {
        url: 'http://i.imgur.com/4yjea7s.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(33, 42),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(16, 42)
    };
            myMarker[id] = new google.maps.Marker({
                position: new google.maps.LatLng(57.721035,12.939819),
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: false,
                icon: image
            });

            google.maps.event.addListener(myMarker[id], 'click', function() {
           var image = {
        url: 'http://i.imgur.com/1eHR1c3.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(108, 141),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(54, 0)
      };
      myMarker[id].setDraggable(true);
      myMarker[id].setIcon(image);
          });

    });

的jsfiddle http://jsfiddle.net/S5T9b/1/

http://jsfiddle.net/S5T9b/1/embedded/result/

重现错误的步骤:

  1. 点击地图上的标记
  2. 将标记拖动到地图div的最顶部并将其删除。
  3. 标记现在几乎看不见了但是如果你仔细观察它仍然存在。 你仍然可以再次点击它并移动它 - 然后再次可见。

    我是编程问题还是Safari中的Google地图错误?

2 个答案:

答案 0 :(得分:2)

我很确定这是Google地图错误。但是我通过使用这个解决方案来实现它:

您必须同时指定zIndex并添加

optimized: false

每个标记构造函数,例如

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: resultIcon,
    optimized: false,
    zIndex: 5
})

复制自: https://stackoverflow.com/a/12061606/1679809

答案 1 :(得分:0)

使用Windows 7在Safari中正常工作。这可能只是一个小错误,因为从您的代码中我看不到任何会导致代码在除Safari之外的所有浏览器上正常工作的内容。

我不确定这些人是否有与你完全相同的问题,但无论如何都可能值得查看链接:

http://www.google.com/support/forum/p/maps/thread?tid=56c196bd9ad37c24&hl=en

http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en

Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer