我可以在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);
    }
}

您需要做的是为您自己的InfoWindow设置选项noSuppress为true以打开它们，例如：

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 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 4

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

您必须找到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 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

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

Answer 7

建议你看看我在这里给出的答案： 如何删除默认标记？

var myStyles =[
    {
        featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }
        ]
    }
];

var myOptions = {
    zoom: 10,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles 
};