添加信息窗口GInfoWindow()对象
信息窗口GInfoWindow()对象是Google Maps API中用于提供信息的几个对象之一。和GMaker()对象的title属性相比,GInfoWindow()对象的功能要强大很多。GInfoWindow()不仅可以在GMaker()对象上显示信息,还能在地图上任意一点上显示。内容上不仅可以使用简单的文本,也可以使用HTML。下面将分别介绍如何在GMarker()和GMap2()上添加GInfoWindow()对象。
1.在GMarker()上显示GInfoWindow()对象
在GMarker()上使用GInfoWindow()信息可以通过两种方法,分别是GMarker()对象的openInfoWindowHtml()方法和openInfoWindow()方法。
GMarker.openInfoWindowHtml()的语法格式如下。
Java代码:
- GMarker.openInfoWindowHtml(content, opts?)
其中第一个参数content为HTML的字符串,第二个参数是GInfoWindowOptions对象,可省略。实际上GInfoWindowOptions对象也是个无名类,在此仅maxWidth属性可用,用于限制GInfoWindow()对象的最大宽度。
下面这段代码可在已创建的GMarker上显示一个GInfoWindow()。
Java代码:
- // 创建marker0的过程见上一节
- marker0.openInfoWindowHtml("<div style='color:green;'>这是一个<strong>测试</strong> </div>");
效果如图所示
GMarker.openInfoWindow()方法和上面的方法类似,不过第一个参数content为DOM对象。示例代码如下。效果见图
Java代码:
- // 创建marker0的过程见上一节
- var div = document.createElement("div");
- div.style.color = "green";
- div.innerHTML = "openInfoWindow创建的GInfoWindow";
- marker0.openInfoWindow(div);
2.在GMap2()上显示GInfoWindow()对象
GInfoWindow()对象不仅可以显示在GMarker()地标上,还能直接显示在GMap2()地图上。方法和GMarker()的类似,也有openInfoWindowHtml()方法和openInfoWindow()方法。不过需要多传递一个参数用于确定GInfoWindow()信息窗口的位置。
效果图:
GMap2.openInfoWindowHtml()方法的语法格式如下。
Java代码:
- GMap2.openInfoWindowHtml(point, content, opts?)
其中,point为GLatLng()对象,即为GInfoWindow()信息窗口的锚定点。下面的代码会在Google地图中心显示一个GInfoWindow()信息窗口。
Java代码:
- map.openInfoWindowHtml(map.getCenter(),
- //GMap2. getCenter()将返回地图的中心点
- "<div style='color:red;'>地图上的GInfoWindow()</div>" )
效果如图所示
GMap2.openInfoWindow()方法也是类似的,需要指定一个锚定点。信息窗口的内容需要用DOM对象。这里就不再赘述了。