Question

在桌面计算机浏览器上打开maps.google.com时，单击标记会打开信息窗口。

在 MOBILE 设备浏览器上打开maps.google.com时，点击标记会在底部打开 CARD 。

我正在使用谷歌地图api v3。添加信息窗口很容易。我该如何添加卡？那是否有一个组件？

添加infowindow的代码：

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
        infoWindow.close();
        infoWindow.setContent('Some text');
        infoWindow.open(map, marker);
});

添加卡的代码是否可能是这样？

var card = new google.maps.Card();
google.maps.event.addListener(marker, 'click', function() {
        card.close();
        card.setContent('Some text');
        card.open(map, marker);
});

非常感谢您的帮助！

Answer 1

如果有人在将来需要，我会发布类似的东西，我会发布我的解决方案。使用带有一个指针的iframe创建相同的地图，默认情况下左上角应该有卡信息。复制卡信息的html，然后复制该卡使用的css，将该css作为库添加到您的网页，为地图div创建包装，在使用google api初始化地图后，使用带有卡信息html的jquery追加包装（或者做任何其他jquery功能，把它放在事件等..）。

此处的示例，您可以使用inspect element工具找到您需要的内容： http://mttc.eu/content/contacts

谷歌在移动设备上映射api v3 show cards而不是infowindow

1 个答案: