如何在网页中插入google-maps在线地图
上一篇 / 下一篇 2008-04-15 14:41:46 / 个人分类：转载
(本方法适用于有域名,空间的人使用)
还算比较简单的,首先了解一下Google Maps 是 google 公司推出的一款网上地图工具，通过AJAX技术实现无刷新、可拖动、高性能的网页程序。
在zblog里面,需要改一下<body class="single"onload="load()" nunload="GUnload()">
然后写文章的时候加载一个js文件就行了,比如我在宁波地图的时候加载了一个1.js,先上传到空间上.比较喜欢zblog的文件修改功能.
大家可以打开看一下http://www.ganmaoyao.com/1.js里面的内容.
在文章中插入,<script. language="JavaScript" src="http://www.ganmaoyao.com/1.js" type="text/javascript"></script>
注意这里需要用你自己的key,每一个域名都有自己的key,调用我的js在域名上实现不了的,可以在本地电脑新建一个网页然后复制一下看看效果.
在这里申请key:http://www.google.com/apis/maps/signup.html
在1.js文件里<script. src=http://maps.google.com/maps?file=api&v=2&key=改成你申请来的key" type="text/javascript"></script>
想要显示自己家的地图.
只要修改这里的地标就可以了 map.setCenter(new GLatLng(29.873545655686,121.536598205570002), 12);
设置地标就行了,后面的12是地图放大放小的,至于你家里的地标多少,可以到这里查,http://www.eemap.org/
var point = new GLatLng(29.865879473690174,121.554536819458022);
map.addOverlay(createMarker(point, "琴桥"));
这里是在地图上标志你家的位置,比如这里的琴桥.
不同文章显示不同的地图,只需要加载不同的js文件就行了,就比如上面的两篇文章(我想应该可以用插件类的形式实现的,呵,不会编,不过这样虽然有点麻烦,不过建议多上传几个js文件,因为在zblog后台可以文件管理,改下地标就行了).
下面是一些参考文献资料,大家可以看看.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--
下面的 Script 加载了GMap API
此出必须在所有的应用前加载，否则可能会出现隐含错误
使用你自己的API Key替换掉 key=abcdefg 中的 abcdefg
PS:GMaps 兼容大部分浏览器 可以在使用 GMaps 前, 先用 GBrowserIsCompatible() 函数检查是否支持。
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
// CDATA 标签说明：CDATA 是XML格式中表示文本段的，当你的网页使用 XHTML 编写时候，就需要加 CDATA 标签.
// 因为注释标签 "< ! -- " 只能注销掉部分内容, 容易导致 XML 解析器分析失败.
//<
function load() {
//检查浏览器是否支持
if (GBrowserIsCompatible()) {
//声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中.
var map = new GMap2(document.getElementById("map"));
//添加地图控制器, 下面4个类型的地图控制器是同一类型的. 4 种类型,可选一个
//缩小模式
//map.addControl(new GSmallMapControl());
//最大模式
map.addControl(new GLargeMapControl());
//只有放大和缩小的模式
//map.addControl(new GSmallZoomControl());
//只有地图缩放控制条的模式
//map.addControl(new GScaleControl());
//填加地图类型控制器 允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换
map.addControl(new GMapTypeControl());
//可以通过GMap2.setMapType()方法修改地图的显示模式
//内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式:
map.setMapType(G_NORMAL_MAP);
//地图加载后必须设置中心点, 否则将出现错误警告.
//GLatLng(Lat,Lng) 是一个坐标, Lat:纬度,Lng:经度, 假如你使用变量请使用 Number 对象
//这是个变量精度问题在16级深度下将可能产生超过18位小数的数字.
map.setCenter(new GLatLng(40.714395,-74.005494), 15);
}
}
//]]>
</script>
</head>
<!--
在页面加载完毕后, 显示 GMAP 实例
-->
<body onload="load()" onunload="GUnload()">
<!--
GMaps 显示容器,需要在创建 GMaps 对象前创建
GMaps 的大小通过容器的属性获取, 修改容器的大小后需要调用 GMap2.checkResize() 使 GMaps 适应容器的大小
-->
<div id="map" style="width: 500px; height: 300px"> </div>
</body>
</html>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example - Get click point</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
//检查浏览器是否支持
if (GBrowserIsCompatible()) {
//声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//注册 click 事件
GEvent.addListener(map, "click", function(marker, point) {
//事件触发时将有 2 个参数传入
//marker:地图上的标记点,假如不是点在标记点上,则此值为null
//point:GlatLng对象,记录事件发生点的坐标,深度只能通过map.getZoom()获取
if (marker) {
//如果是标记点,输出标记点的坐标
alert(marker.getPoint());
} else {
//假如不是标记点,在当前位置创建一个标记点
map.addOverlay(new GMarker(point));
}
});
map.setCenter(new GLatLng(40.714395,-74.005494), 15);
GDownloadUrl("Untitled-1.html",function(text,status){
alert(text);
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 960px; height: 560px"> </div>
</body>
</html>
还算比较简单的,首先了解一下Google Maps 是 google 公司推出的一款网上地图工具，通过AJAX技术实现无刷新、可拖动、高性能的网页程序。
在zblog里面,需要改一下<body class="single"onload="load()" nunload="GUnload()">
然后写文章的时候加载一个js文件就行了,比如我在宁波地图的时候加载了一个1.js,先上传到空间上.比较喜欢zblog的文件修改功能.
大家可以打开看一下http://www.ganmaoyao.com/1.js里面的内容.
在文章中插入,<script. language="JavaScript" src="http://www.ganmaoyao.com/1.js" type="text/javascript"></script>
注意这里需要用你自己的key,每一个域名都有自己的key,调用我的js在域名上实现不了的,可以在本地电脑新建一个网页然后复制一下看看效果.
在这里申请key:http://www.google.com/apis/maps/signup.html
在1.js文件里<script. src=http://maps.google.com/maps?file=api&v=2&key=改成你申请来的key" type="text/javascript"></script>
想要显示自己家的地图.
只要修改这里的地标就可以了 map.setCenter(new GLatLng(29.873545655686,121.536598205570002), 12);
设置地标就行了,后面的12是地图放大放小的,至于你家里的地标多少,可以到这里查,http://www.eemap.org/
var point = new GLatLng(29.865879473690174,121.554536819458022);
map.addOverlay(createMarker(point, "琴桥"));
这里是在地图上标志你家的位置,比如这里的琴桥.
不同文章显示不同的地图,只需要加载不同的js文件就行了,就比如上面的两篇文章(我想应该可以用插件类的形式实现的,呵,不会编,不过这样虽然有点麻烦,不过建议多上传几个js文件,因为在zblog后台可以文件管理,改下地标就行了).
下面是一些参考文献资料,大家可以看看.
Google Maps 的网站：http://maps.google.com/ (英文)
暂时还没有中文的,地图方面卫星图象精度在北美(美国和加拿大)方面比较高.
Google Maps API：http://www.google.com/apis/maps/ (英文,在这里可以申请到 API KEY)
GMap API Key是每个GMap 程序都要有的, 他与网站域名关联, 申请时输入网站域名(多域名的网站处理起来可要麻烦点了).假如你的GMaps没有API KEY 者显示一个提示框.
PS: 请注意他的协议. 这里我就不重复了.
Google Maps API Document(V2)：http://www.google.com/apis/maps/documentation/
这个是Google公司公布的开发文档. 开发前需要阅读.
PS:http://blog.csdn.net/dany_zj/archive/2006/09/20/1253523.aspx(自己翻译的中文版)
API中的坐标：在GMaps 中一个位置使用2个浮点数确定,他们代表经度和纬度(度数经过转换成数字), 另外还有个深度值来表示坐标所在地图中的所放级数(范围大致为1~19, 只有个别城市能达到最大深度).
2. 申请 GMap API Key
访问 http://www.google.com/apis/maps/signup.html 阅读协议,填写你的网站地址就可以申请到API KEY了,
PS: 申请需要一个小前提, 你需要有Google帐户. 不用担心, 他没有申请个数的限制(起码现在没有).
PS: 申请需要一个小前提, 你需要有Google帐户. 不用担心, 他没有申请个数的限制(起码现在没有).
3. 创建第一个GMaps
下面我们创建一个GMaps，包含一个地图控制器和地图模式控制器。
<!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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Google Maps JavaScript API Example</title><!--下面的 Script 加载了GMap API此出必须在所有的应用前加载，否则可能会出现隐含错误使用你自己的API Key替换掉 key=abcdefg 中的 abcdefgPS:GMaps 兼容大部分浏览器 可以在使用 GMaps 前, 先用 GBrowserIsCompatible() 函数检查是否支持。 --><script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script><script type="text/javascript">
// CDATA 标签说明：CDATA 是XML格式中表示文本段的，当你的网页使用 XHTML 编写时候，就需要加 CDATA 标签.// 因为注释标签 "< ! -- " 只能注销掉部分内容, 容易导致 XML 解析器分析失败.//<
//检查浏览器是否支持 if (GBrowserIsCompatible()) { //声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中. var map = new GMap2(document.getElementById("map")); //添加地图控制器, 下面4个类型的地图控制器是同一类型的. 4 种类型,可选一个 //缩小模式 //map.addControl(new GSmallMapControl()); //最大模式 map.addControl(new GLargeMapControl()); //只有放大和缩小的模式 //map.addControl(new GSmallZoomControl()); //只有地图缩放控制条的模式 //map.addControl(new GScaleControl()); //填加地图类型控制器 允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换 map.addControl(new GMapTypeControl()); //可以通过GMap2.setMapType()方法修改地图的显示模式 //内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式: map.setMapType(G_NORMAL_MAP); //地图加载后必须设置中心点, 否则将出现错误警告. //GLatLng(Lat,Lng) 是一个坐标, Lat:纬度,Lng:经度, 假如你使用变量请使用 Number 对象 //这是个变量精度问题在16级深度下将可能产生超过18位小数的数字. map.setCenter(new GLatLng(40.714395,-74.005494), 15); }}//]]></script></head><!--在页面加载完毕后, 显示 GMAP 实例--><body onload="load()" onunload="GUnload()"><!--GMaps 显示容器,需要在创建 GMaps 对象前创建GMaps 的大小通过容器的属性获取, 修改容器的大小后需要调用 GMap2.checkResize() 使 GMaps 适应容器的大小--><div id="map" style="width: 500px; height: 300px"> </div></body></html>4. 记录地图坐标
首先我们前面提过，GMaps 的坐标使用的是数字不是度，所以我们获取的一般也都用数字表示，当然如果你要使用度数的话，你需要自己写个转换函数来获取度数。
我们这里直接在地图上获取他的GLatLng()对象
通过click 事件获取事件发生时改点的坐标, 我们直接使用这个.
<!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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Google Maps JavaScript API Example - Get click point</title><script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script><script type="text/javascript">function load() { //检查浏览器是否支持 if (GBrowserIsCompatible()) { //声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中. var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); //注册 click 事件 GEvent.addListener(map, "click", function(marker, point) { //事件触发时将有 2 个参数传入 //marker:地图上的标记点,假如不是点在标记点上,则此值为null //point:GlatLng对象,记录事件发生点的坐标,深度只能通过map.getZoom()获取 if (marker) { //如果是标记点,输出标记点的坐标 alert(marker.getPoint()); } else { //假如不是标记点,在当前位置创建一个标记点 map.addOverlay(new GMarker(point)); } }); map.setCenter(new GLatLng(40.714395,-74.005494), 15); GDownloadUrl("Untitled-1.html",function(text,status){ alert(text); }); }}//]]></script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 960px; height: 560px"> </div></body></html>导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报
TAG:
