在你的博客中添加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 ，申请的方法很简单：
- 首先，先决定你的网页会出现在哪个 URL ，例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道该网页的 URL 应该会是 http://blog.yam.com/syshen/archives/XXXX.html ，前面包含到最后一个目录的字符串便是要来申请 Key 的基准，也就是 http://blog.yam.com/syshen/archives/ 。
- 以你的账号登入 Google ，如果你还没有账号，请到 https://www. google .com/accounts/ 申请。
- 连到 Google Maps API Sign Up 网页 将 (1) 所决定的 URL 填入，并按 "Generate API Key" 取得 Key 。
- 最后会出现三个方块，分别是你取得的 Key ，你指定的 URL ，以及一个范例。建议是将范例中的 <script src="..."></script> 整行 Copy/Paste 下来。
Goole Maps API 使用上有些法律上的限制要注意：
- 你的 Google Maps 服务必须免费开放给一般使用者。
- 如果你预估你的地图服务会有超过每天 50,000 笔页面的存取量，请主动联络 Google 。
- Google 会不定期更新 API ，你有责任跟着更新你的网页中的 API 。
- 你不能更改或隐藏 Google 的 logo 。
- Google 有权力以后在地图上放广告，而你不能更改或破坏这些广告。
- 有些地图应用是 Google 不希望看到的，例如指明哪些地方可以购买到毒品或是任何违法行为。
<IFRAME>标签代码 -- 插入到您想显示的地方
<!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()){ //判断当前浏览器是否支持
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 >
<div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
</body>
</html>
HTML的相关说明:
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>标签的load()事件和GUnload()事件
说明: 前者是页面直接加载googlemap, 后者会消除大多数导致内存泄露的循环引用, 以避免您应用程序可能带来的内存泄露问题
5. <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
说明:这个div标签,是显示google地图的标签,可以设定宽度和高度,border是边框,我是为了适应我的模板加上的
官方文档 :
Google 地图API( 官方中文)
Google 地图API 博客( 官方英文)
关于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