Можно ли удалить только всплывающие окна POI в Google Maps API v3?
Итак, я работаю над новым веб-приложением, которое фокусируется на картах. Используя API Карт Google 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"
}]
}]
});
Это полностью удаляет все, и я все еще хочу видеть ярлыки, поскольку я думаю, что они приносят ценность, но просто думают, что пузыри слишком отвлекают внимание.
Для справки вот пузырь, который я хочу удалить:
![Example]()
И вот та же самая карта с POI полностью удалена:
![Example]()
Ответы
Ответ 1
Примечание редактора: этот ответ был применим до версии 3.23. Начиная с версии 3.24, выпущенной в 2016 году, вы можете использовать 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);
}
}
Вам нужно установить опцию 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);
или
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);
Ответ 2
Начиная с версии 3.24, API JavaScript Карт имеет свойство clickableIcons в объекте MapOptions:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
Вы можете использовать это свойство, чтобы отключить интерактивные значки на картах, установив для свойства clickableIcons значение false. Также существует метод setClickableIcons().
Пожалуйста, посмотрите на этот пример:
http://jsbin.com/liyamecoqa/edit?html,output
Ответ 3
Обнаружено обходное решение! Это довольно грязно, поэтому он может перестать работать, если Google что-то изменит, но он работает!
Вы должны найти слои, где google помещает infoWindows для POI. Вплоть до этого эти слои отличаются от слоев, используемых для пользователей infoWindows. Трюк состоит в том, чтобы найти правильные слои. Теневой слой можно найти легко, но слой infoWindow создается после создания некоторого POI infoWindow, поэтому вы должны прослушивать событие click в том же div, что и в google. Затем вы обнаружите слой POI infoWindow с помощью z-index или по URL-адресам изображения, но это не очень хорошо протестировано... Обратите внимание, что если 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);
});
Ответ 4
Больше не работает, так как обновление API Карт Google.
Я нашел его наконец!
Вот демо: http://jsfiddle.net/fbDDZ/14/ (нажатие "open" или POI ничего не делает, нажатие "open please" открывает InfoWindow)
Идея состоит в том, чтобы исправить InfoWindow.prototype.open, чтобы позволить ему принять третий аргумент. Google не передает его, но мы должны.
Код:
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 открывает InfoWindow в POI, например:
myInfoWin.open(map, poiMarker)
Окно не открывается, потому что Google не сказал "пожалуйста". Вот как мы должны открывать наши информационные окна:
myInfoWin.open(map, poiMarker, true);
Ответ 5
Изменить: Хорошо, похоже, что Google внедрил решение, посмотрите на ответ на xony.
Хорошо, после поиска везде, похоже, вы не можете просто отображать POI с нажатием на отключенный, вы можете посмотреть здесь для обсуждения:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe/3975bbda46904ae7?lnk=gst&q=disable+poi#3975bbda46904ae7
и этот обмен, в частности:
Привет,
Есть ли какая-либо возможность сделать POI видимыми, но не интерактивными?
Спасибо Lorenzo
Крис Бродфут
К сожалению, не Лоренцо. Вам нужно применить стиль карты, чтобы скрыть метки poi:
[{featureType: "poi", elementType: "labels", stylers: [{ видимость: "выключено" }]}]
(или просто скрыть бизнес-позы, "poi.business" )
Это происходит от разработчиков Google Maps, поэтому вы не можете отключить всплывающее окно, а именно POI.
Ответ 6
Я бы осмотрел элемент с помощью firebug и использовал display:none !important;
, чтобы удалить эти стили, если Google не позволяет вам напрямую обращаться к ним через API (что, я думаю, вы должны быть в состоянии)
Ответ 7
Предложите вам посмотреть на ответ, который я привел здесь:
Как удалить маркеры по умолчанию?
var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: myStyles
};