气球提示
气球提示一个很不错的界面，他可以用于放置一些小提示或或是一些信息。例如，下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息：
01.function initialize() {
02. if (GBrowserIsCompatible()) {
03. var map = new GMap2(document.getElementById("map_canvas"));
04. map.setCenter(new GLatLng(37.97110, 23.72601), 13);
05. var html = "Parthenon 帕台农神庙, 地址: Acropolis Hill";
06. map.openInfoWindow(map.getCenter(),
07. document.createTextNode(html));
08. map.setUIToDefault();
09. }
10.} |
活动标记
我们可以合并一些标记和气球提示来创建一个活动标记，这样一来，我们可以达到这样的效果——当用户点击某个标记的时候才会显示提示。代码如下所示：
01.function initialize() {
02. if (GBrowserIsCompatible()) {
03. var map = new GMap2(document.getElementById("map_canvas"));
04. map.setCenter(new GLatLng(37.97918, 23.71665), 13);
05. var baseIcon = new GIcon(G_DEFAULT_ICON);
06. baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
07. baseIcon.iconSize = new GSize(20, 34);
08. baseIcon.shadowSize = new GSize(37, 34);
09. baseIcon.iconAnchor = new GPoint(9, 34);
10. baseIcon.infoWindowAnchor = new GPoint(9, 2);
11.
12. function createMarker(point, index) {
13. var redIcon = new GIcon(baseIcon);
14. redIcon.image = "http://www.google.com/mapfiles/marker.png";
15. markerOptions = { icon:redIcon };
16. var marker = new GMarker(point, markerOptions);
17. GEvent.addListener(marker, "click", function() {
18. marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill");
19. });
20. return marker;
21. }
22.
23. var latlng = new GLatLng(37.97110, 23.72601);
24. map.addOverlay(createMarker(latlng));
25. }
26.} |
让我来梳理一下上面的代码。下面的部分是在标记下增加一个阴影：
1.var baseIcon = new GIcon(G_DEFAULT_ICON);
2.baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
3.baseIcon.iconSize = new GSize(20, 34);
4.baseIcon.shadowSize = new GSize(37, 34);
5.baseIcon.iconAnchor = new GPoint(9, 34);
6.baseIcon.infoWindowAnchor = new GPoint(9, 2); |
标记的Action是在这里设置的：
01.function createMarker(point, index) {
02. var redIcon = new GIcon(baseIcon);
03. redIcon.image = "http://www.google.com/mapfiles/marker.png";
04. markerOptions = { icon:redIcon };
05. var marker = new GMarker(point, markerOptions);
06. GEvent.addListener(marker, "click", function() {
07. marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill");
08. });
09. return marker;
10.} |
这里是我们的标记的坐标：
1.var latlng = new GLatLng(37.97110, 23.72601);
2.map.addOverlay(createMarker(latlng)); |
载入地图
我们可以通过两种方法载入地图。我们可以让地图在整网页载入时载入（通过使用body的load事件），也可以把载入过程赋给其它事件。下面的两个方法是我们需要注意的：
* initialize() 载入地图
* GUnload() 卸载地图以释放内存
我们当然还需要使用HTML的DIV标签来指定一个ID，这样才能被JavaScript使用，在我们的示例中，我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。
域名频道资讯中心
.
分页: [1] [2] [3] [4]
： 219854
：714658643 MSN：
chenlh@dns110.com Email： support@dns110.com