GOOGLE Map API 基本实例

现在的位置: 首页＞JavaScript＞正文

上篇下篇

GOOGLE Map API 基本实例

2007年11月14日 ⁄ JavaScript ⁄ 暂无评论 ⁄ 被围观阅读(1,681)+

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例</title>
<style type="text/css">
v\\:* {
behavior:url(#default#VML);
}
body{
font-size:12px;
}
</style>
<script src="http://www.blogg.cn/http://ditu.google.com/maps?file=api&&v=2.x"
type="http://www.blogg.cn/text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); //地图控制
map.addControl(new GOverviewMapControl()); //缩略图
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(40.83792120564548, 111.67177677154541), 14); //起始地图中心坐标

// 添加默认气泡提示
map.openInfoWindowHtml(new GLatLng(40.83792120564548, 111.67177677154541),"<b>西部数字网</b>");

// 添加一条编码折线
var polyline = new GPolyline([
new GLatLng(40.83792120564548, 111.67177677154541),
new GLatLng(40.83907381448265, 111.68160438537597),
new GLatLng(40.83978809722463, 111.69402837753296),
new GLatLng(40.845144972444885, 111.71454191207886)
], "#FF0000", 5);
map.addOverlay(polyline);

// 在地图上添加带气泡的标注
map.addOverlay(createMarker(new GLatLng(40.83792120564548, 111.67177677154541),"西部数字网"));
map.addOverlay(createMarker(new GLatLng(40.83907381448265, 111.68160438537597),"土默特中学"));
map.addOverlay(createMarker(new GLatLng(40.83978809722463, 111.69402837753296),"交警指挥中心"));
map.addOverlay(createMarker(new GLatLng(40.845144972444885, 111.71454191207886),"我的家"));

// 在给定的点上创建带编号的标注函数
function createMarker(point, msg) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>" + msg + "</b>");
});
return marker;
}

// 获取鼠标单击处的坐标
GEvent.addListener(map, "click", function(marker, point) {
//事件触发时将有 2 个参数传入
var mapPoint;

if (marker) //标记
mapPoint=marker.getPoint();
else
mapPoint = point;

document.getElementById("message").innerHTML = mapPoint;
});

}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
<div id="message"></div>
</body>
</html>