google.maps.StreetViewPanorama的Pegman图标落后于地图上的标记

时间:2016-03-09 10:12:17

标签: google-maps-api-3

我正在使用外部库MarkerWithLabel在地图上创建标记。此外,使用的标记图标是字体真棒图标。我也使用google.maps.StreetViewPanorama来显示标记的街景。但是有一个问题,当我拖动街景小人图标并将鼠标悬停在标记上时,标记后面会显示街景小人图标,但我希望街头小人图标显示在标记之上。我试着设置标记的z-index但没有用。为了更好地理解,我在(jsfiddle http://jsfiddle.net/t4v8nhoq/11/)中创建了示例。

var map;
var panorama;
var streetView;

function initialize() {

map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        zoom: 14,
        center: new google.maps.LatLng(54.976, -2.021),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano")
    );

map.setStreetView(panorama);

streetView = map.getStreetView();

streetView.setPosition( new google.maps.LatLng(54.976, -2.021) );

var icon = {
        html: '<span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i></span>'
    };
var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(54.975, -2.020),
    icon: ' ',
    labelContent: icon.html,
    labelAnchor: new google.maps.Point(95, 20),
    labelClass: "labels",
    labelStyle: {
        opacity: 0.75
    },
    zIndex: null,
    map: map
});

}

请查看此链接。将街景小人图标放在标记上。请给我一些解决方案来解决这个问题。

1 个答案:

答案 0 :(得分:0)

您可以使用此代码。

var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(54.975, -2.020),
map: map}); 
google.maps.event.addListener(
marker1,
'click',
function(){ document.getElementById("listener").innerHTML +=
"marker clicked<br>";
});
}

或查看此页面http://jsfiddle.net/spiderplant0/brkca/