【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地圖(Use Google Map API On Your Bolg)
*+申請一組 Google Maps API Key
在使用 Google Maps API 之前，你必須向 Google 申請到一組 Key ，申請的方法很簡單：
Goole Maps API 使用上有些法律上的限制要注意：
?
<IFRAME>標(biāo)簽代碼 -- 插入到您想顯示的地方
<!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=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){ //加載google地圖API
if (GBrowserIsCompatible()){ //判斷當(dāng)前瀏覽器是否支持
var map = new GMap2(document.getElementById("map")); //取得map對象
//設(shè)置顯示區(qū)域的中心點(diǎn)(經(jīng)度,緯度)
var center_point = new GLatLng(38.41055825094609, 115.42236328125);
map.setCenter(center_point, 6); //參數(shù):1.中心點(diǎn)變量 2.精度值(高度值?)
map.addControl(new GSmallMapControl()); //加入縮放按鈕
map.addControl(new GScaleControl()); //加入小地圖顯示
//顯示標(biāo)記所用的圖片(未使用陰影圖片)
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); //圖片的錨點(diǎn)
var home_point = new GLatLng(37.056136,114.457626); //標(biāo)記坐標(biāo)
//添加標(biāo)記,參數(shù):1.坐標(biāo) 2.標(biāo)記圖片(第二個參數(shù)省略以后,用默認(rèn)圖片)
map.addOverlay(new GMarker(home_point, icon1));
//折線終止點(diǎn)
var go_point = new GLatLng(39.98738,116.320152);
//添加折線
var second_points = []; //折線點(diǎn)數(shù)組
second_points.push(home_point); //添加第一個點(diǎn)
second_points.push(go_point); //添加第二個點(diǎn)
map.addOverlay(new GPolyline(second_points)); //添加折線
//添加自定義控件(實(shí)現(xiàn)地圖與衛(wèi)星圖的轉(zhuǎn)換)
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("衛(wèi)星圖"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.setMapType(G_HYBRID_MAP); //改變形式為衛(wèi)星圖
});
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 >
<div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
</body>
</html>
HTML的相關(guān)說明:
1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
2. <style type="text/css">
v:* {
behavior:url(#default#VML);
}
</style>
說明: 兩個是為了在IE下, 正常顯示折線而添加的
3. <script src="http://maps.google.com/maps?file=api&v=2&key=YourKey" type="text/javascript"></script>
說明:這里的YourKey就是要放你上面申請的Key的值的地方
4. <body>標(biāo)簽的load()事件和GUnload()事件
說明: 前者是頁面直接加載googlemap, 后者會消除大多數(shù)導(dǎo)致內(nèi)存泄露的循環(huán)引用, 以避免您應(yīng)用程序可能帶來的內(nèi)存泄露問題
5. <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
說明:這個div標(biāo)簽,是顯示google地圖的標(biāo)簽,可以設(shè)定寬度和高度,border是邊框,我是為了適應(yīng)我的模板加上的
官方文檔 :
Google 地圖API( 官方中文)
Google 地圖API 博客( 官方英文)
關(guān)于IE 下顯示折線的官方解釋
?參考資料：[1]http://www.j2megame.org/wupei/blog.php/myblog/other/2007/08/29/google-map-api
[2]syshen's blog http://blog.yam.com/syshen
轉(zhuǎn)載于:https://www.cnblogs.com/penglink/archive/2009/02/25/1398181.html
總結(jié)
以上是生活随笔為你收集整理的【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wince驱动异常调试方法（作者：wog
- 下一篇： showModalDialog数据缓存问