Google MAP API调用方法

来源: 外贸网站建设   点击数:   发布时间: 2010-9-21

Google MAP API调用方法

近在网上找了很久也没有找到比较好的GOOGLE地图的使用方法,所以我们壹零网络里技术部的一位同事花了半天时间,经过对多篇文章研究后,整理出以下的方法,希望对从事网站建设行业的朋友有帮助。

 

使用Google MAP API显示Google MAP,可以自定义坐标, 加入自己的描述, 等等。

使用步骤:
1。申请API密钥,只需要登录 http://code.google.com/intl/zh-CN/apis/maps/signup.html ,输入网站的网址,如: http://demo.hunuo.com ,填写完毕按“生成API密钥”即可。

2。加载Google地图API,在网页<head></head>加入,

<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA6vpS801yIrtuIMuUfP_1LRSxsn5a65eZaAi_5C9z2RjNFFY5KBSBb4uXgDPOoqPTKZ5RfZHQ1HTweA&sensor=true"
type="text/javascript"></script>
复制代码
其中 key为步生成的API密钥,注意:此js为UTF-8编码的,所以页面也好能用UTF-8编码,否则在IE可能会提示错误

3。在<body></body>设置一个容器,用来显示Google MAP,如演示页面中,加入了

<div id="map_canvas" style="width: 1024px; height: 600px"></div>
复制代码
4。在页面加载完毕后,初始化Google MAP,需要在<body>加入onLoad事件和onUnload事件,如

<body onLoad="load()" onUnload="GUnload()">
复制代码
,其中 load() 是自定义的初始函数,GUnload为API内置的卸载函数。load()函数如下:

var map;  //当前的地图对象
function load() {
if (GBrowserIsCompatible()) {   
map = new GMap2(document.getElementById('map_canvas'));   //创建一个GMpa2对象,将赋值给map,并将地图显示在id=map_canvas的dom对象中
 
// 给地图添加内置的控件,分别为:
// 平移及缩放控件(左上角)、比例尺控件(左下角)、缩略图控件(右下角)
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
 
// 将视图移到广州壹零网络-网站建设
map.setCenter(new GLatLng(23.127889,113.280029), 13);  //个参数是GLatLng对象,用来指定中心点的坐标,第二个参数是放大倍数
 
//手动创建一个标注
var point = new GLatLng(23.115800, 113.2750000);    //创建一个坐标
var marker=new GMarker(point);  //在此坐标创建一个标注
map.addOverlay(marker);    //将此标注加入到当前地图中
 
//手动加入提示信息  GEvent为Google MAP的事件管理对象, addListener可以绑定一个事件的处理函数
GEvent.addListener(marker, 'click',
function() {
var div=document.createElement("div");  //创建一个div,用于装载提示信息,当关闭提示信息时会自动释放对象
div.innerHTML="<img src=' /images/Logo.GIF'><br><a href=' '>网站建设</a>";
//加入提示信息
marker.openInfoWindow(div);   //在标注上弹出提示信息层}
);
}
}
 

上一篇: 4个容易犯的HTML标签错误 下一篇: 番禺网站建设谈Iframe自适应高度