【转】在你的博客中添加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

转载于:https://www.cnblogs.com/penglink/archive/2009/02/25/1398181.html

【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)相关推荐

2020-04-19-如何在博客中添加视频链接
layout title subtitle date author preview-img header-img catalog istop music-id music-idfull apserve ...
hexo博客中添加categories分类
title: hexo博客中添加categories分类 date: 2020-04-01 16:45:16 tags: hexo categories: 学习方法如下: 在根目录下scaffold ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
博客中添加动漫妹子，总有一个适合你，嘿嘿嘿！
常喜欢逛博客的你,是不是会碰到一些有意思的东西,有很多博客网站都有一个卡通人物,它一直盯着你鼠标移动的地方,俗称看板娘. 是不是好想拥有她? 今天就来讲讲如何在自己的博客中添加类似的功能.如果你的数学 ...
jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
在CSDN博客中添加量子恒道统计功能的做法
作者:朱金灿来源:http://blog.csdn.net/clever101 什么是量子恒道统计?量子恒道统计是一套免费的网站流量统计分析系统.致力于为所有个人站长.个人博主.所有网站管理者.第三 ...
如何在新浪博客中添加JavaScript代码
新浪博客中不能包含JavaScript代码和IFrame的代码.如果要在博客中加入像Google的广告之类的JavaScript代码,一般的方法是不行的. 今天试了一上午,搞定了. 原理:将JavaS ...
hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...
博客中gitalk最新评论的获取 github api使用
博客中,对于网友的评论以及每篇文章的评论数还是很重要的.但是基于静态的页面想要存储动态的评论数据是比较难的,一般博客主题中都内置了评论插件,但是博客主题中对于最新评论的支持显示还是很少的,至少目前我是 ...

【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)

【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)相关推荐

最新文章

热门文章