google maps api 应用
A.HTML(这个不需要KEY，就可以调用goole maps)
<!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 Maps JavaScript API Example</title>
<style type="text/css">
v:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU12WWTC3BPBTqFW70VQ05BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTtzvXp0VdG0bQv8uU1EVpAdndL0g"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){ //加载google地图API
if (GBrowserIsCompatible()){ //判断当前浏览器是否支持
var map = new GMap2(document.getElementById("map")); //取得map对象
//设置显示区域的中心点(经度,纬度)
var center_point = new GLatLng(38.41055825094609, 115.42236328125);
map.setCenter(center_point, 6); //参数:1.中心点变量 2.精度值(高度值?)
map.addControl(new GSmallMapControl()); //加入缩放按钮
map.addControl(new GScaleControl()); //加入小地图显示
//显示标记所用的图片(未使用阴影图片)
var icon1 = new GIcon();
icon1.image = "http://www.yoursite.com/images/a.gif"; //图片所在位置
icon1.iconSize = new GSize(16, 16); //图片大小
icon1.iconAnchor = new GPoint(8, 13); //图片的锚点
var home_point = new GLatLng(37.056136,114.457626); //标记坐标
//添加标记,参数:1.坐标 2.标记图片(第二个参数省略以后,用默认图片)
map.addOverlay(new GMarker(home_point, icon1));
//折线终止点
var go_point = new GLatLng(39.98738,116.320152);
//添加折线
var second_points = []; //折线点数组
second_points.push(home_point); //添加第一个点
second_points.push(go_point); //添加第二个点
map.addOverlay(new GPolyline(second_points)); //添加折线
//添加自定义控件(实现地图与卫星图的转换)
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("地图"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.setMapType(G_NORMAL_MAP); //改变形式为地图
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("卫星图"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.setMapType(G_HYBRID_MAP); //改变形式为卫星图
});
map.getContainer().appendChild(container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function() {
//自定义控件的显示位置
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(55, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
//自定义控件的样式
button.style.color = "#ffffff";
button.style.backgroundColor = "#000000";
button.style.font = "small Arial";
button.style.padding = "2px";
button.style.marginTop = "5px";
button.style.textAlign = "center";
button.style.width = "3em";
button.style.cursor = "pointer";
}
//添加自定义控件
map.addControl(new TextualZoomControl());
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()" >
<div id="map" style="width: 1000px; height: 800px;border:5px solid black;"></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------
B.html(用到从GOOGLE那里申请的KEY)
<!DOCTYPE html "-//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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAU12WWTC3BPBTqFW70VQ05BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTtzvXp0VdG0bQv8uU1EVpAdndL0g&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1000px; height: 800px"></div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------