<!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);
如果您对本文有任何疑问或者建议,请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇:
网页设计中文字颜色的搭配技巧 下一篇:
在网站上实现 Google Reader 一键订阅
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】