|
Info Window
除了标示地点外，你也可以在 Marker 上显示额外的信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
GEvent.addListener (KyotoStation, "click", function() {
KyotoStation.openInfoWindowHtml ("日本京都车站");
});
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看范例所呈现的结果
上面这个程序，在当使用者点了该 Marker 时会出现一个方匡显示你输入的文字，这文字可以是 HTML 格式，也就是说允许上面出现图片等信息。那可不可以不用去等到使用者点了之后才出现，可不可以在加载时就出现呢？好象是不行的，至少我测试的结果都会得到一些错误讯息。不过你可以这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
map.openInfoWindow (new GPoint(135.761404, 34.982823), document.createTextNode("日本京都车站"));
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看范例所呈现的结果
直接在地图上显示 Info Window，而不是在 Marker 上。但是 GMap 对象并没有 openInfoWindowHtml() Function，只有 openInfoWindow() 可以用，而这个 Function 是以一个 DOM 对象作为参数，而非 HTML 格式的字符串内容。
GPolyline
在地图上画线，这更酷了，请看以下范例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.770159, 34.986128), 3);
var points = [new GPoint(135.762649, 34.984124), new GPoint(135.762563, 34.986128), new GPoint(135.777369, 34.985952), new GPoint(135.778806, 34.990910)];
var line = new GPolyline(points, "#ff0000");
map.addOverlay(line);
//]]>
</script>
</html>
看范例所呈现的结果
OK，这个范例要告诉你如何从京都车站搭公车到音羽山清水寺。我设定了一串的 GPoint 对象数组，每个点都是线条转折处，并利用此数组新增了一个 GPolyline 对象，并将这 polyline 加到地图中即可(你也可以自订 Polyline 的颜色及大小)。你或许还会注意到这个范例多了一些奇怪的东西，一个 namespace 以及一个 CSS style 设定，这是为了 IE 浏览器的兼容性而加的，关于这个稍后会再提到。
浏览器兼容性问题
Google Maps API 基本上没有什么浏览器兼容性的问题，他支持的浏览器有：
Firefox/Mozilla
IE 5.5+
Safari 1.2+
Opera
除此外，你也可以利用 GBrowserIsCompatible() 函式来检查使用者的浏览器是否有兼容性上的问题。例如，你可以这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("mymap"));
map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
} else {
var map = document.getElementById ("mymap");
map.innerHTML = "";
map.innerHTML = "Sorry, 你的浏览器不支持 Google Maps";
}
//]]>
</script>
</html>
看范例所呈现的结果
上一页 [1] [2] [3] 下一页
|
