最近在网上找了很久也没有找到比较好的GOOGLE地图的使用方法，所以我们互诺科技里技术部的一位同事花了半天时间，经过对多篇文章研究后，整理出以下的方法，希望对从事网站建设行业的朋友有帮助。
演示页面:http://demo.hunuo.com/googlemap.html
使用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='http://www.hunuo.com/images/Logo.GIF'><br><a href='http://www.hunuo.com'>网站建设</a>";
-
//加入提示信息
-
marker.openInfoWindow(div); //在标注上弹出提示信息层}
-
);
-
}
-
}
复制代码
更详细的说明，参考：http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html
互诺科技
粤公网安备 44010402000282号 粤ICP备09019378号-1
