<!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=gbk"/>
<title>地圖效果</title>
<!--
注意：
編碼格式要統一。比如javascript要用gbk的,html頁面要用gbk的
網頁的META信息裏也最好有一個指明是GBK的標籤：
<meta content="text/html; charset=gbk" http-equiv="Content-Type" />
4.最後也是最重要的。要指明oe=gbk
不是動態加載的時候需要在scr的鏈接上加上"&oe=gbk";
如果裏動態加載的話，參照下面的形式加載：
google.load("maps", "2", {
"language" : "zh-CN",
callback: initMap,
other_params: "oe=gbk"
});
-->
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAoGSnSKpvFJ_vd37z-3W2YBTvnP71Q9TKzzkAeGbDhgqBh291hxQ1Fz6KO9ilwgDlDwJLzZIilsTQWQ&hl=zh-CN&oe=gbk"
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.917, 116.397), 13);
//控制器類型,（控件位置,控件大小）-可選參數
map.addControl(new GLargeMapControl(),new GControlPosition(G_ANCHOR_TOP_LEFT , new GSize(10,10)));
//加入衛星和混合地圖標籤
map.addControl(new GHierarchicalMapTypeControl());
//開啓縮略圖
map.addControl(new GOverviewMapControl());
//開啓鼠標滑輪
map.enableScrollWheelZoom();
//開啓地圖搜索控件
map.enableGoogleBar();
// 添加底面疊加層,定座標
var boundaries = new GLatLngBounds(new GLatLng(39.917, 116.397), new GLatLng(39.935, 116.42));
// 添加底面疊加層,添加圖片,可作廣告之類
var oldmap = new GGroundOverlay("http://hiphotos.baidu.com/slzs_zyt/pic/item/4b822ef479856970dcc4746c.jpg", boundaries);
map.addOverlay(oldmap);
//在地圖的特定座標位置 創建HTML文本
map.openInfoWindowHtml(new GLatLng(39.922, 116.414),"<font color='blue' size='2'>大家好,我是 slzs……－ －|||<br>這個添加層可以在很多地方利用</font>");
/*map.getCenter();可以得到地圖中心位置座標*/
// 創建自定義圖標
var tinyIcon = new GIcon();
// 圖片
tinyIcon.image = "http://hiphotos.baidu.com/slzs_zyt/pic/item/64638f51d0a30b8e8d54307c.jpg";
// 陰影
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
// 圖片寬高
tinyIcon.iconSize = new GSize(70, 90);
// 陰影寬高
tinyIcon.shadowSize = new GSize(70, 90);
// 此圖標在地圖上的錨定點相對於圖標圖像左上角的像素座標
tinyIcon.iconAnchor = new GPoint(6, 20);
// 信息窗口在此圖標上的錨定點相對於圖標圖像左上角的像素座標
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// 創建標記
var marker0 = new GMarker(new GLatLng(39.900,116.379),tinyIcon)
// 向地圖上添加
map.addOverlay(marker0);
// 監聽click事件
GEvent.addListener(marker0, "click", function() {
map.openInfoWindowHtml(new GLatLng(39.900,116.379),"<font color='red' size='2'>您進行了點擊操作，彈出鏈接地址</font>");
window.open('http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html');
});
//延時9秒顯示
window.setTimeout(function(){
map.openInfoWindowHtml(new GLatLng(39.900,116.385),"<font color='red' size='2'>這是一個可以點擊彈出鏈接的標記</font>");
},9000);
//在特定位置加標記
map.addOverlay(new GMarker(new GLatLng(39.922,116.377)));
//延時3.5秒顯示
window.setTimeout(function(){
map.openInfoWindowHtml(new GLatLng(39.922,116.377),"<font color='red' size='2'>這是一個固定位置的標記</font>");
},3500);
//添加一個可拖動的標記
var marker = new GMarker(new GLatLng(39.905,116.377), {draggable: true});
//監聽這個標記的提起動作
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
//監聽這個標記的放下動作
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("<font color='red' size='2'>已經放下，標記反彈</font>");
//延時1秒關閉提示信息
window.setTimeout(function(){marker.closeInfoWindow()},1000);
});
//添加這個標記
map.addOverlay(marker);
//延時6秒顯示提示信息
window.setTimeout(function(){
marker.openInfoWindowHtml("<font color='red' size='2'>這是一個可拖動位置的標記,按住鼠標左鍵拖動</font>");
},6000);
// 記錄標記
var gmarker= null;
//點擊獲取地理座標
clickListener=GEvent.addListener(map, "click", function(marker,point){
if(point){
alert("x"+point.x+",y"+point.y+",倍率"+map.getZoom());
}
if(gmarker!=null){
//移除之前的標記
map.removeOverlay(gmarker);
}
gmarker=new GMarker(point);
//在點擊位置加標記
map.addOverlay(gmarker);
}
);
}
clearMapCopyRight('map_canvas');
}
// google 地圖版權，不是我不尊重版權，而是它令人難以忍受，經常超長超出地圖範圍，於是乎js強行暴力解決它
// 清理google版權信息
var clearMapCopyRightInterval=null;
function clearMapCopyRight(googleMapDivId){
var googleMapObj = document.getElementById(googleMapDivId);
if(googleMapObj){
mapDivNodes = googleMapObj.childNodes;
if(mapDivNodes){
for(i=0; i<mapDivNodes.length; i++){
var tmpStr = mapDivNodes[i].innerHTML;
if(tmpStr && tmpStr.indexOf("地圖數據")>-1){
if(clearMapCopyRightInterval != null){
window.clearInterval(clearMapCopyRightInterval);
clearMapCopyRightInterval = null;
}
mapDivNodes[i].innerHTML="<a href='http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html'><font color='red'>神龍之首©自定義版權</font></a>";
return;
}
}
}
}
clearMapCopyRightInterval = window.setInterval(function(){clearMapCopyRight(googleMapDivId)},500);
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<center>
<h1>測試地圖效果</h1>
<div style="position: absolute;z-index: 10;margin-top: 472px;margin-left:5px;background-color: #fff;width: 65px;height: 24px"/><font color='red' ><b>搜 索</b></font></div>
<div style="position: absolute;z-index: 10;margin-top: 583px;margin-left:500px;font-size: 12px;background-color: #fff"/></div>
<div id="map_canvas" style="width: 95%; height: 500px;background-image:url('http://hiphotos.baidu.com/slzs_zyt/pic/item/498f2924a590b503d507422d.jpg');z-index: 1"></div>
<font style="font-size: 12px;color:blue">介紹說明：地圖中有一個添加層，一個固定的標記，一個可拖動的標記，一個可彈出鏈接地址的自定義圖標，google的logo被覆蓋，地圖移動時，加載部分的底部圖片更換爲自定義圖片，點擊地圖提示座標和縮放級別並標記 --------- 0神龍之首0</font>
</center>
</body>
</html>
<!--
注：你可以全文複製存爲html中直接打開測試使用，若不明白可與羣友討論