javascript 我可以只删除 Google Maps API v3 中 POI 的弹出气泡吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7950030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I remove just the popup bubbles of POI's in Google Maps API v3?
提问by Andrew G. Johnson
So I'm working on a new web app that has a big focus on maps. Using Google Maps API v3 and really happy with it but noticed that the points of interest (POI's) have automatically bubbles with more details and a link to the Google Places page. I don't want these. Here is my code:
所以我正在开发一个新的网络应用程序，它非常关注地图。使用 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
});
I know you can remove the POI's entirely. Here is my code for that:
我知道您可以完全删除 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"
}]
}]
});
This removes everything entirely and I still would like to see the labels as I think they bring value but just think the bubbles are too much of a distraction.
这完全消除了一切，我仍然希望看到标签，因为我认为它们带来了价值，但只是认为泡沫太分散注意力了。
For reference here is the bubble I want to remove:
作为参考，这里是我想去除的气泡：
And here is the same map with POI's removed entirely:
这是完全删除了 POI 的同一张地图：
回答by jsmarkus
Editor's note: this answer was applicable until version 3.23. Since version 3.24 released in 2016, you can use clickableIconsmap option. See xomena's answer.
编者注：此答案适用于 3.23 版之前。从 2016 年发布的 3.24 版本开始，您可以使用clickableIcons地图选项。请参阅 xomena 的回答。
Version ~3.12 fix. Demo
版本 ~3.12 修复。演示
Here is a new patch that works again. I have tested it with version 3.14.
这是一个再次起作用的新补丁。我已经用 3.14 版对其进行了测试。
Now we gonna patch set()instead of open().
现在我们要修补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);
}
}
What you have to do is set option noSuppressto truefor your own InfoWindow's in order to open them, for example:
你所要做的是设定选项noSuppress来true为自己InfoWindow的才能打开它们，例如：
var popup = new google.maps.InfoWindow({
content: 'Bang!',
noSuppress: true
});
popup.setPosition(new google.maps.LatLng(-34.397, 150.644));
popup.open(map);
or:
或者：
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);
回答by xomena
Starting from version 3.24 the Maps JavaScript API has a property clickableIcons in MapOptions object:
从版本 3.24 开始，Maps JavaScript API 在 MapOptions 对象中有一个属性 clickableIcons：
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
You can use this property to turn off clickable icons on maps by setting the clickableIcons property to false. Also exists a setClickableIcons() method.
您可以使用此属性通过将 clickableIcons 属性设置为 false 来关闭地图上的可点击图标。还存在一个 setClickableIcons() 方法。
Please look at this example: http://jsbin.com/liyamecoqa/edit?html,output
回答by TMS
Found a workaround!It's pretty dirty so it might stop work if google changes something, but it works!
找到了解决方法！它很脏，所以如果谷歌改变某些东西它可能会停止工作，但它有效！
You have to find the layers where google puts the infoWindows for POIs. Fortunatelly these layers are different from the layers used for users infoWindows. The trick is to find the proper layers. The shadow layer can be found easily, but the infoWindow layer is created after some POI infoWindow is created, so you have to listener to the click event on the same div as google does. Then you find the POI infoWindow layer by z-index, or by image urls but this is not well tested... Note that if google changes the z-index, it will stop work...
您必须找到 google 为 POI 放置 infoWindows 的层。幸运的是，这些层与用于用户 infoWindows 的层不同。诀窍是找到合适的层。阴影层很容易找到，但是 infoWindow 层是在创建一些 POI infoWindow 之后创建的，因此您必须在与 google 相同的 div 上侦听 click 事件。然后您通过 z-index 或图像 url 找到 POI infoWindow 层，但这没有经过很好的测试...请注意，如果 google 更改 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);
});
回答by jsmarkus
No longer works, since update of Google Maps API.
不再有效，因为更新了 Google Maps API。
I've found it finally!
我终于找到了！
Here is the demo: http://jsfiddle.net/fbDDZ/14/(clicking "open" or POI does nothing, clicking "open please" opens InfoWindow)
这是演示：http: //jsfiddle.net/fbDDZ/14/（单击“打开”或 POI 不执行任何操作，单击“请打开”打开 InfoWindow）
The idea is to patch InfoWindow.prototype.open so to allow it accept the third argument. Google does not pass it, but we should.
这个想法是修补 InfoWindow.prototype.open 以便允许它接受第三个参数。谷歌没有通过它，但我们应该。
The code:
代码：
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 opens InfoWindow on POI like that:
谷歌在 POI 上打开 InfoWindow，如下所示：
myInfoWin.open(map, poiMarker)
The window will not open, because Google didnt say "please". That is how we should open our info windows:
窗口不会打开，因为谷歌没有说“请”。这就是我们应该如何打开我们的信息窗口：
myInfoWin.open(map, poiMarker, true);
回答by Roman Goyenko
Edit: Ok, looks like Google implemented a solution, look at xomena answer.
编辑：好的，看起来谷歌实施了一个解决方案，看看 xomena 的答案。
Ok, after searching everywhere it looks like you can't just display the POIs with clicking disabled, you could look here for more discussions:
好的，在到处搜索之后，您似乎不能只在禁用单击的情况下显示 POI，您可以在此处查看更多讨论：
and this exchange in particular:
特别是这次交流：
Hi,
Is there any possibilltiy to make POIs visible but not clickable?
Thanks Lorenzo
你好，
是否有可能使 POI 可见但不可点击？
谢谢洛伦佐
Chris Broadfoot
Unfortunately not Lorenzo. You'll need to apply a map style to hide poi labels:
[ { featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] } ]
(or to just hide business pois, "poi.business")
克里斯·布罗德福特
不幸的是不是洛伦佐。您需要应用地图样式来隐藏 poi 标签：
[ { featureType: "poi", elementType: "labels", stylers: [ {可见性: "off" } ] } ]
（或只是隐藏业务 pois，“poi.business”）
This comes from Google Maps developers, so means you can't disable the popup, just the POIs.
这来自 Google Maps 开发人员，因此意味着您不能禁用弹出窗口，只能禁用 POI。
回答by jeffreynolte
I would inspect element using firebug and use display:none !important;to remove these styles if Google does not allow you to access them directly via the API (which I would think you should be able to)
display:none !important;如果 Google 不允许您直接通过 API 访问它们，我将使用 firebug 检查元素并使用删除这些样式（我认为您应该能够）
回答by duncan
Suggest you look at the answer I gave here: How do I remove default markers?
建议您查看我在这里给出的答案： 如何删除默认标记？
var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: myStyles
};
