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

IT技术 javascript google-maps google-maps-api-3
2021-03-16 17:24:57

所以我正在开发一个新的网络应用程序,它非常关注地图。使用 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"
        }]
    }]
});

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

作为参考,这里是我想去除的气泡:

例子

这是完全删除了 POI 的同一张地图:

例子

6个回答

编者注:此答案适用于 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);
    }
}

你所要做的是设定选项noSuppresstrue为自己InfoWindow的才能打开它们,例如:

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);
如果您使用诸如InfoBox 插件之类的东西,则设置该选项noSuppress是多余的。只要您通过例如 InfoBox 打开您的自定义信息窗口,set就不会调用修补程序我自己使用 Google Maps API v3 对此进行了测试。
2021-05-04 17:24:57
为了获得可靠的用户体验,请在 MapOptions 中使用新的 clickableIcons 属性(请参阅下面的 xomena 回答)
2021-05-10 17:24:57
这太酷了!使用您的代码可以非常简单地对 POI 执行任何操作。例如,我在这里向 POI infoWindow 添加了自定义按钮:jsfiddle.net/kasheftin/935Km添加日志信息并观察每个内部方法的调用堆栈很简单。在这里,我为 google.maps.InfoWindow.prototype: jsfiddle.net/kasheftin/935Km/1做了它
2021-05-18 17:24:57

从版本 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

找到了解决方法!它很脏,所以如果谷歌改变某些东西它可能会停止工作,但它有效!

您必须找到 google 为 POI 放置 infoWindows 的层。幸运的是,这些层与用于用户 infoWindows 的层不同。诀窍是找到合适的层。阴影层很容易找到,但是 infoWindow 层是在创建一些 POI infoWindow 之后创建的,因此您必须在与 google 相同的 div 上侦听 click 事件。然后你通过 z-index 或图像 urls 找到 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);
});
我喜欢它并投了赞成票 - 但是人们,您必须知道这就像删除网页中的付费广告一样。与执行此操作的浏览器插件不同,如果您有足够的流量,谷歌可以将您的域列入黑名单。
2021-04-22 17:24:57
这对我不起作用。这是正常的,因为它是 3 年前写的。我找到了另一种解决方法,张贴在这里:stackoverflow.com/a/24817995/943535
2021-05-08 17:24:57
为了获得可靠的用户体验,请在 MapOptions 中使用新的 clickableIcons 属性(请参阅下面的 xomena 回答)
2021-05-13 17:24:57
请解释downvotes。我花了几个小时才弄明白!
2021-05-19 17:24:57

不再有效,因为更新了 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);
        }
    }
}

谷歌在 POI 上打开 InfoWindow,如下所示:

myInfoWin.open(map, poiMarker)

窗口不会打开,因为谷歌没有说“请”。这就是我们应该如何打开我们的信息窗口:

myInfoWin.open(map, poiMarker, true);
好吧,所以他们在 Maps API 3.12 中对其进行了更改......坏消息,但我将致力于解决方法。感谢您报告它。
2021-04-22 17:24:57
我希望这项工作可以,但是当我尝试使用它并且它似乎不起作用时,open似乎从未调用过修补版本我肯定会fixInfoWindow在其他所有内容加载后调用..
2021-04-28 17:24:57
它也已修补回 3.11,但 3.10 目前仍允许使用此技巧。我对此的担忧是 Google 通常会在移动设备上禁用此行为,但在 Android PhoneGap 应用程序中似乎仍然会发生这种情况。
2021-04-28 17:24:57
这不再有效,proto.open 永远不会被调用。该演示也不再有效:jsfiddle.net/fbDDZ/14 有人知道新方法吗?谢谢。
2021-05-07 17:24:57
为了获得可靠的用户体验,请在 MapOptions 中使用新的 clickableIcons 属性(请参阅下面的 xomena 回答)
2021-05-08 17:24:57

编辑:好的,看起来谷歌实施了一个解决方案,看看 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: [ {可见性: "off" } ] } ]

(或只是隐藏业务 pois,“poi.business”)


这来自 Google Maps 开发人员,因此意味着您不能禁用弹出窗口,只能禁用 POI。

我没有贬低你的努力我贬低了一个忽略我问题的答案
2021-04-28 17:24:57
你甚至运行自己的代码吗?我做了,你点击机场图标并获得一个信息窗口
2021-05-01 17:24:57
我当然做了。那么,您的目标是在单击时不显示气泡?我以为您在显示地图时会自动获得气泡。让我研究一下。顺便说一句,为那些试图帮助你并花费数小时做这件事的人提供 -1 并不酷。
2021-05-02 17:24:57
@Romario,以“Chris Broadfoot ...”开头的第二个块只是重复了 OP 在他的问题中的代码。
2021-05-04 17:24:57
为了获得可靠的用户体验,请在 MapOptions 中使用新的 clickableIcons 属性(请参阅下面的 xomena 回答)
2021-05-10 17:24:57