使用Google Maps API v3禁用兴趣点信息窗口
我有一个信息气泡和自定义标记的自定义地图。 当我放大景点，如公园和大学出现，当我点击一个信息窗口打开。 如何禁用信息窗口？
我的代码如下：
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() {} 更新Google Maps JavaScript API V3
您可以在MapOptions中将clickableIcons设置为false。 这将保持POI图标，但只要你想要禁用infowindows。
function initialize() { var myMapOptions = { clickableIcons: false } }
更多细节在这里…
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
查看可点击的其他答案：错误答案。
但是，如果您希望它是可点击的，但没有infowindow ，请在event上调用stop()以防止infowindow显示，但仍可获取位置信息：
map.addListener('click', function (event) { // If the event is a POI if (event.placeId) { // Call event.stop() on the event to prevent the default info window from showing. event.stop(); // do any other stuff you want to do console.log('You clicked on place:' + event.placeId + ', location: ' + event.latLng); } }
有关更多信息，请参阅文档 。
其他选项：完全删除POI图标，而不是只有infoWindow：
var mapOptions = { styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}] }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
您可以通过创build一个没有感兴趣点的标签的样式化的地图。 这可以在地图上维护地形和其他很好的信息，但会删除标记。
var remove_poi = [ { "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ] map.setOptions({styles: remove_poi})
你可以考虑下面的方法来禁用POI信息窗口 ：
function disablePOIInfoWindow(){ var fnSet = google.maps.InfoWindow.prototype.set; google.maps.InfoWindow.prototype.set = function () { }; }
例
function initMap() { var latlng = new google.maps.LatLng(40.713638, -74.005529); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); disablePOIInfoWindow(); } function disablePOIInfoWindow(){ var fnSet = google.maps.InfoWindow.prototype.set; google.maps.InfoWindow.prototype.set = function () { alert('Ok'); }; } google.maps.event.addDomListener(window, 'load', initMap);
html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; }
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map_canvas"></div>
只需将地图设置为不显示兴趣点即可。 这很简单，不违反Google的服务条款。
例如
mapOpts = { styles: [ { featureType: "poi", stylers: [ visibility: "off" ] } ] }; $("#my-map").gmap(mapOpts).on("init", function(evt, map){ // do stuff with the initialised map });
如果你想要的数据没有得到InfoWindow的HTML显示，你只需要重新工作的原型google.maps.InfoWindow：
google.maps.InfoWindow.prototype.open = function () { return this; //prevent InfoWindow to appear } google.maps.InfoWindow.prototype.setContent = function (content) { if (content.querySelector) { var addressHTML = content.querySelector('.address'); var address = addressHTML.innerHTML.replace(/<[^>]*>/g, ' ').trim(); var link = content.querySelector('a').getAttribute('href'); var payload = { header: 'event', eventName: 'place_picked', data: { name: content.querySelector('.title').innerHTML.trim(), address: address, link: link } }; console.log('emit your event/call your function', payload); } };
