使用谷歌地图API V3禁用点的感兴趣的信息窗口 [英] Disable point-of-interest information window using Google Maps API v3
本文介绍了使用谷歌地图API V3禁用点的感兴趣的信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个信息泡沫和自定义标记的自定义地图。当我放大的兴趣点，如公园和大学似乎当我点击打开一个信息窗口。如何禁用信息窗口？
我的code是如下：
VAR地理codeR;
VAR地图;
VAR infoBubble;
VAR下拉=;
变种gmarkers = [];VAR hostel_icon =新google.maps.MarkerImage（'/资源/ hostel_blue_icon.png'，
新为google.maps.Size（28,32）
新google.maps.Point（0,0），
新google.maps.Point（14,32））;VAR bar_icon =新google.maps.MarkerImage（'/资源/ bar_red_icon.png'，
新为google.maps.Size（28,32）
新google.maps.Point（0,0），
新google.maps.Point（14,32））;VAR icon_shadow =新google.maps.MarkerImage（'/资源/ myicon_shadow.png'，
新为google.maps.Size（45,32）
新google.maps.Point（0,0），
新google.maps.Point（12,32））;VAR customIcons = {
宿舍： {
图标：hostel_icon，
影子：icon_shadow
}，
酒吧：{
图标：bar_icon，
影子：icon_shadow
}
};函数初始化（）{
VAR经纬度=新google.maps.LatLng（12.82364，26.29987）;
VAR myMapOptions = {
变焦：2，
中心：经纬度，
panControl：假的，
scaleControl：真实，
mapTypeId设为：google.maps.MapTypeId.TERRAIN，
mapTypeControlOptions中：{风格：google.maps.MapTypeControlStyle.HORIZONTAL_BAR}，
navigationControlOptions：{风格：google.maps.NavigationControlStyle.DEFAULT}
}
地图=新google.maps.Map（的document.getElementById（map_canvas的），myMapOptions）; infoBubble =新InfoBubble（{
shadowStyle：0，
填充：0，
的backgroundColor：'RGB（57,57,57）'，
borderRadius：5，
arrowSize：10，
边框宽度：1，
了maxWidth：400，
BORDERCOLOR：＃2c2c2c'，
disableAutoPan：假的，
hideCloseButton：真实，
arrowPosition：50，
backgroundClassName：'假'，
arrowStyle：0
}）; //改变这取决于你的PHP文件的名称
downloadUrl（phpsqlajax_genxml_2.php功能（数据）{
VAR XML = parseXml（数据）;
VAR的标记= xml.documentElement.getElementsByTagName（标记）;
对于（VAR I = 0; I＆LT; markers.length;我++）{
VAR bar_name =标记[I] .getAttribute（bar_name）;
VAR hostel_name =标记[I] .getAttribute（hostel_name）;
VAR街道=标记[I] .getAttribute（街道）;
VAR城市=标记[I] .getAttribute（城市）;
变种后code =标记[I] .getAttribute（后code）;
VAR国家=标记[I] .getAttribute（国家）;
VAR页=标记[I] .getAttribute（页）;
VAR map_photo =标记[I] .getAttribute（map_photo）;
VAR类型=标记[I] .getAttribute（类型）;
VAR类别=标记[I] .getAttribute（类别）;
VAR点=新google.maps.LatLng（
parseFloat（标记[I] .getAttribute（纬度）），
parseFloat（标记[I] .getAttribute（LNG）））; VAR HTML ='＆LT; DIV CLASS =信息窗口＆GT;＆LT; DIV CLASS =iwPhoto的风格=WIDTH：105px;高度：65px;＆GT;' +＆LT; A HREF ='+网页+'＆GT;＆LT; IMG SRC ='+ map_photo +'ALT =''/＆GT;＆LT; / A＆gt;中+'＆LT; / DIV＆GT;＆LT; DIV CLASS =iwName的风格=family：宋体;＆GT;' +＆LT; A HREF ='+网页+'＆gt;中+ hostel_name +＆下; / A＆gt;中+'＆LT; / DIV＆GT;＆LT; DIV CLASS =iwCategory的风格=高度：15px的;＆GT;' +分类+'＆LT; / DIV＆GT;＆LT; DIV CLASS =iwCity的风格=高度：29px;＆GT;' +＆LT; A HREF ='+网页+'＆gt;中+城市+＆下; / A＆gt;中+'＆LT; DIV CLASS =iwArrow的风格=宽度：29px;高度：29px;＆GT;' +＆LT; A HREF ='+网页+'＆GT;＆LT; IMG SRC =/资源/ arrow.png/＆GT;＆LT; / A＆gt;中+'＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'; VAR图标= customIcons [类型] || {};
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：点，
图标：icon.icon，
影子：icon.shadow，
标题：bar_name
}）;
marker.bar_name = bar_name;
marker.category =类别;
bindInfoBubble（标记，地图，infoBubble，HTML，bar_name）; gmarkers.push（标记）; 海峡='＆LT;选项选择＆GT; - 选择一个俱乐部 - ＆LT; /选项＆GT;';
为（J = 0; J＆LT; gmarkers.length; J ++）{
STR + ='＆LT;期权价值=+ gmarkers [J] .bar_name +'＆GT;'+ gmarkers [J] .bar_name +，+ gmarkers [J] .category +'＆LT; /选项＆GT;';
}
VAR STR1 ='＆LT;表格名称=form_city行动=＆GT;＆LT;选择风格=宽度：150像素; ID =select_cityNAME =select_cityUrl的onchange =handleSelected（本）;＆GT;';
VAR STR2 ='＆LT; /选择＆GT;＆LT; /形式为GT;';
下拉= STR1 + STR + STR2;
}
。的document.getElementById（DD）的innerHTML =下拉菜单;
}）;
}功能handleSelected（OPT）{
VAR indexNo =选择[opt.selectedIndex]的.index;
google.maps.event.trigger（gmarkers [indexNo-1]，点击）;
}功能bindInfoBubble（标记，地图，infoBubble，HTML）{
google.maps.event.addListener（标记，'点击'，功能（）{
infoBubble.setContent（HTML）;
infoBubble.open（地图，标记）;
google.maps.event.addListener（地图，点击功能（）{
infoBubble.close（）;
}）;
}）;
}功能downloadUrl（URL，回调）{
VAR请求= window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新XMLHtt prequest; request.onreadystatechange =功能（）{
如果（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request.responseText，request.status）;
}
}; request.open（GET，网址，真实）;
request.send（NULL）;
}功能parseXml（STR）{
如果（window.ActiveXObject）{
VAR DOC =新的ActiveXObject（'Microsoft.XMLDOM'）;
doc.loadXML（STR）;
返回文档;
}否则如果（window.DOMParser）{
返回（新的DOMParser）.parseFromString（STR，'文本/ XML'）;
}
}功能doNothing（）{}
解决方案
只有禁用POI信息窗口还没有禁用的POI完全是不可能的。请参见这个线程，其中谷歌称这是谷歌重要在观看用户体验时，底图是一致的，这样，这些图标是由用户可点击任何地方出现的认可。因此，我们不打算允许所示的图标没有可以点击的。
侦听POI信息窗口打开，所以你可以立即禁用它（例如，通过 google.maps.event.addListener（信息窗口，'domready中，[..]）也是不可能的。
您可以做的最好的是：
＆LT;风格＆GT;
.gm-SM {
！显示：无重要;
}
＆LT; /风格＆GT;
这将隐藏POI信息窗口的内容，但仍留下一个微小的信息窗口：
另一个选择是在POI把一个图层：<一href=\"http://stackoverflow.com/questions/7950030/can-i-remove-just-the-popup-bubbles-of-pois-in-google-maps-api-v3/8361698#8361698\">Can我只删除的POI在谷歌地图API V3的弹出气泡？
如果您想彻底删除的图标，请参见对方的回答。
修改20150529：
如果这还不清楚：你可以完全禁用的POI，使用的MapOptions。但是，完全消除了POI-图标，而不仅仅是信息窗口：
VAR的MapOptions = {
款式：[{类型特征：芋泥，元素类型：标签，造型器：[{能见度：关}]}]
};
VAR地图=新google.maps.Map（的document.getElementById（'地图画布'），
的MapOptions）;
I have a custom map with an information bubble and custom markers. When I zoom into points of interest such as parks and universities appear and when I click an information window opens. How do I disable the info window?
My code is as follows:
var geocoder;
var map;
var infoBubble;
var dropdown = "";
var gmarkers = [];
var hostel_icon = new google.maps.MarkerImage('/resources/hostel_blue_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));
var bar_icon = new google.maps.MarkerImage('/resources/bar_red_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));
var icon_shadow = new google.maps.MarkerImage('/resources/myicon_shadow.png',
new google.maps.Size(45,32),
new google.maps.Point(0,0),
new google.maps.Point(12,32));
var customIcons = {
hostel: {
icon: hostel_icon,
shadow: icon_shadow
},
bar: {
icon: bar_icon,
shadow: icon_shadow
}
};
function initialize() {
var latlng = new google.maps.LatLng(12.82364, 26.29987);
var myMapOptions = {
zoom: 2,
center: latlng,
panControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
infoBubble = new InfoBubble({
shadowStyle: 0,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
arrowSize: 10,
borderWidth: 1,
maxWidth: 400,
borderColor: '#2c2c2c',
disableAutoPan: false,
hideCloseButton: true,
arrowPosition: 50,
backgroundClassName: 'phoney',
arrowStyle: 0
});
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml_2.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var bar_name = markers[i].getAttribute("bar_name");
var hostel_name = markers[i].getAttribute("hostel_name");
var street = markers[i].getAttribute("street");
var city = markers[i].getAttribute("city");
var postcode = markers[i].getAttribute("postcode");
var country = markers[i].getAttribute("country");
var page = markers[i].getAttribute("page");
var map_photo = markers[i].getAttribute("map_photo");
var type = markers[i].getAttribute("type");
var category = markers[i].getAttribute("category");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<div class="infowindow"><div class="iwPhoto" style="width: 105px; height: 65px;">' + "<a href='" + page + "'><img src='" + map_photo + "' alt=''/></a>" + '</div><div class="iwName" style="height: 24px;">' + "<a href='" + page + "'>" + hostel_name + "</a>" + '</div><div class="iwCategory" style="height: 15px;">' + category + '</div><div class="iwCity" style="height: 29px;">' + "<a href='" + page + "'>" + city + "</a>" + '<div class="iwArrow" style="width: 29px; height: 29px;">' + "<a href='" + page + "'><img src='/resources/arrow.png'/></a>" + '</div></div></div>';
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
title: bar_name
});
marker.bar_name = bar_name;
marker.category = category;
bindInfoBubble(marker, map, infoBubble, html, bar_name);
gmarkers.push(marker);
str = '<option selected> - Select a club - </option>';
for (j=0; j < gmarkers.length; j++){
str += '<option value="'+gmarkers[j].bar_name+'">'+gmarkers[j].bar_name+', '+gmarkers[j].category+'</option>';
}
var str1 ='<form name="form_city" action=""><select style="width:150px;" id="select_city" name="select_cityUrl" onchange="handleSelected(this);">';
var str2 ='</select></form>';
dropdown = str1 + str + str2;
}
document.getElementById("dd").innerHTML = dropdown;
});
}
function handleSelected(opt) {
var indexNo = opt[opt.selectedIndex].index;
google.maps.event.trigger(gmarkers[indexNo-1], "click");
}
function bindInfoBubble(marker, map, infoBubble, html) {
google.maps.event.addListener(marker, 'click', function() {
infoBubble.setContent(html);
infoBubble.open(map, marker);
google.maps.event.addListener(map, "click", function () {
infoBubble.close();
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
解决方案
Only disabling the POI infowindow without also disabling POIs altogether is not possible. See this thread where Google states "It's important to Google that the user experience when viewing the base map be consistent, such that these icons are recognised by users as clickable wherever they appear. For this reason we do not plan to allow the icons to be shown without clickability."
Listening for the POI infowindow to open, so you could disable it immediately (e.g. through google.maps.event.addListener(infoWindow, 'domready', [..]) is also not possible.
Best you can do is:
<style>
.gm-sm {
display: none !important;
}
</style>
This will hide the contents of the POI info windows but still leave a tiny info window:
Another option is to put a layer over the POI: Can I remove just the popup bubbles of POI's in Google Maps API v3?
If you want to completely remove the icons, see the other answer.
EDIT 20150529:
If this was unclear: You CAN disable POIs altogether, using mapOptions. But that completely removes the POI-icons, and not only the infoWindow:
var mapOptions = {
styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
这篇关于使用谷歌地图API V3禁用点的感兴趣的信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
