我可以在Google Maps API v3中删除POI的弹出气泡吗？

Question

所以我正在开发一个专注于地图的新网络应用程序.使用Google Maps API v3并对此非常满意,但注意到兴趣点(POI)会自动冒泡,其中包含更多详细信息以及指向Google商家信息页面的链接.我不想要这些.这是我的代码:

map = new google.maps.Map(document.getElementById("map"), {
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false
});

我知道你可以完全删除POI.这是我的代码:

map = new google.maps.Map(document.getElementById("map"),{
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false,
    styles:[{
        featureType:"poi",
        elementType:"labels",
        stylers:[{
            visibility:"off"
        }]
    }]
});

这完全消除了一切,我仍然希望看到标签,因为我认为它们带来了价值,但只是认为泡沫太过分散注意力.

这里参考的是我要删除的气泡:

这里是完全删除POI的相同地图:

Answer 1

编者注:这个答案适用于版本3.23.自2016年发布的3.24版以来,您可以使用clickableIcons地图选项.看xomena的答案.

版本~3.12修复.演示

这是一个可以再次运行的新补丁.我用版本3.14测试了它.

现在我们要修补set()而不是open().

function fixInfoWindow() {
    // Here we redefine the set() method.
    // If it is called for map option, we hide the InfoWindow, if "noSuppress"  
    // option is not true. As Google Maps does not know about this option,  
    // its InfoWindows will not be opened.

    var set = google.maps.InfoWindow.prototype.set;

    google.maps.InfoWindow.prototype.set = function (key, val) {
        if (key === 'map' && ! this.get('noSuppress')) {
            console.warn('This InfoWindow is suppressed.');
            console.log('To enable it, set "noSuppress" option to true.');
            return;
        }

        set.apply(this, arguments);
    }
}

你所要做的就是设置选项什么noSuppress来true为自己的InfoWindow才能打开它们,例如"S:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
    noSuppress: true
});

popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

要么:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
});

popup.set('noSuppress', true);
popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

Answer 2

从版本3.24开始,Maps JavaScript API在MapOptions对象中具有属性clickableIcons:

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions

通过将clickableIcons属性设置为false,可以使用此属性关闭地图上的可单击图标.还存在一个setClickableIcons()方法.

请看这个例子:http: //jsbin.com/liyamecoqa/edit？html,output

Answer 3

找到了解决方法!它非常脏,所以如果谷歌改变一些东西它可能会停止工作,但它的工作原理!

您必须找到Google将信息窗口放入POI的图层.幸运的是,这些图层与用户infoWindows使用的图层不同.诀窍是找到合适的层.可以很容易地找到阴影层,但是在创建一些POI infoWindow之后创建了infoWindow图层,因此您必须在与谷歌相同的div上监听click事件.然后你可以通过z-index或图片网址找到POI infoWindow图层但是这个版本没有经过充分测试...请注意,如果谷歌更改了z-index,它将停止工作......

var lis = google.maps.event.addListener(my_map, 'tilesloaded', function () {

    $('*').filter(function () { return $(this).css('z-index') == 104 }).remove();
        // remove layer for POI infoWindow shadow - has z-index: 104

    var eventDiv = $(my_map.getDiv()).children().children()[0];
        // this div is used by google to handle events

    $(eventDiv).click(function clickHandler() {
        var timeout = 100;
        var attempts = 20;
        setTimeout(function timeoutHandler() {
            // there are 2 ways how to find POI infoWindow layer
            // 1st way - by the z-index
            var poiInfoLayer = $('*').filter(function () { 
                return $(this).css('z-index') == 169 || 
                       $(this).css('z-index') == 248 
            });
            // 2nd way - by the images :-)
            // but not tested much - it may also find normal infoWindows!
            //var poiInfoLayer = $('[src*="/mapfiles/iw3.png"]').parent().parent();

            if (poiInfoLayer.length) {
                    poiInfoLayer.remove();
                    $(eventDiv).unbind('click', clickHandler);
            }
            else {
                    if (attempts > 0) {
                            setTimeout(timeoutHandler, timeout);
                            attempts--;
                    }
            }

        }, timeout);
    });
    google.maps.event.removeListener(lis);
});

Answer 4

自Google Maps API更新后不再有效.

我终于找到了!

这是演示:http://jsfiddle.net/fbDDZ/14/(点击"打开"或POI什么都不做,点击"打开请"打开InfoWindow)

想法是修补InfoWindow.prototype.open,以便允许它接受第三个参数.谷歌没有通过它,但我们应该.

代码:

function fixInfoWindow() {
    var proto = google.maps.InfoWindow.prototype,
        open = proto.open;
    proto.open = function(map, anchor, please) {
        if (please) {
            return open.apply(this, arguments);
        }
    }
}

Google会在POI上打开InfoWindow:

myInfoWin.open(map, poiMarker)

窗口无法打开,因为谷歌没有说"请".这就是我们应该打开信息窗口的方式:

myInfoWin.open(map, poiMarker, true);

Answer 5

编辑:好的,看起来谷歌实施了一个解决方案,看看xomena答案.

好的,在搜索到处后看起来你不能只显示点击禁用的POI,你可以在这里查看更多讨论:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe/3975bbda46904ae7?lnk=gst&q=disable+poi#3975bbda46904ae7

特别是这次交流:

嗨,

是否有可能使POI可见但不可点击？

谢谢洛伦佐

克里斯布罗德福特

不幸的是不是洛伦佐.您需要应用地图样式来隐藏poi标签:

[{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]}]

(或者只是隐藏商业pois,"poi.business")

这来自谷歌地图开发人员,因此意味着您无法禁用弹出窗口,只能禁用POI.

Answer 6

display:none !important;如果 Google 不允许您直接通过 API 访问它们（我认为您应该能够），我将使用 firebug 检查元素并用于删除这些样式