无法切换到新的Visual刷新后关闭信息窗口

本文介绍了无法切换到新的Visual刷新后关闭信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我决定，我愿意给这是在谷歌I / O 2013年尝试公布新的Visual刷新，因为所有需要得到新的底图/ UI是一个单一的财产/查询字符串。

的的JavaScript API 的

函数initializeMap（）{    VAR myOptions = {        变焦：13，        mapTypeId设为：google.maps.MapTypeId.ROADMAP    };    google.maps.visualRefresh = TRUE;    地图=新google.maps.Map（的document.getElementById（map_canvas的），myOptions）;}

- 或 -

的静态地图API 的

maps.googleapis/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false

和它的工作很好，我的地图现在使用的新底图瓷砖和UI。

不过，由于变化，当我移动设备（使用JavaScript API）上打开信息窗口，在它的右上角的关闭按钮似乎没有任何回应更长。是否有任何其他人观察到这一点？我试图找出如果它与我的code或与谷歌的一个bug。

更新：下面是我使用来测试一个基本的小提琴。适用于Chrome，IE浏览器和放大器;火狐但不能在移动设备上（只能够尽量的android到目前为止）

jsfiddle/vG3WE/1

解决方案

我注意到一些苹果设备一样的效果。认为这是一个非常肮脏的黑客，但是，如果你不希望等到这个bug是固定的，你可以自己实现关闭事件，以便它也应该在移动设备上工作：

你需要定义一个ID为您的信息窗口内容的第一个（你需要稍后上）

VAR contentString ='＆LT; D​​IV ID =infowindowContent＆gt;您应该能够把我关＆LT; / DIV＆GT;';VAR信息窗口=新google.maps.InfoWindow（{  内容：contentString}）;

然后，你需要附加一个监听器此信息窗口的domready中的事件。因为如果这一事件被触发，你知道的信息窗口附加到DOM，你可以开始实施下面的技巧：

google.maps.event.addListener（信息窗口，'domready中'，函数（）{  变种infowindowCloseButton = $（$（$（＃infowindowContent）父母（）[2]）的儿童（）[0]）;  infowindowCloseButton.click（函数（）{    infowindow.close（）;  }）;}）;

我们做的是pretty简单：我们刚刚导航到信息窗口的关闭按钮，并附加一个鼠标点击事件来关闭信息窗口这个

。

我把一个小例子：

chatmap.eu/playground/closeInfoWindows.html

正如我所说的：这是非常脏，但它为我工作

I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.

JavaScript API

function initializeMap() { var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; google.maps.visualRefresh = true; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

-- OR --

Static Maps API

maps.googleapis/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false

And it worked great, my maps now use the new basemap tiles and UI.

However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.

UPDATE: Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)

jsfiddle/vG3WE/1

解决方案

I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:

First of all you need to define an ID for your info window content (you'll need that later on)

var contentString = '<div id="infowindowContent">You should be able to close me</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString });

Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:

google.maps.event.addListener(infowindow, 'domready', function() { var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]); infowindowCloseButton.click(function(){ infowindow.close(); }); });

What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.

I put together a small example:

chatmap.eu/playground/closeInfoWindows.html

As I said: It is very dirty but it worked for me.