最近在網(wǎng)上找了很久也沒有找到比較好的GOOGLE地圖的使用方法，所以我們互諾科技里技術部的一位同事花了半天時間，經(jīng)過對多篇文章研究后，整理出以下的方法，希望對從事網(wǎng)站建設行業(yè)的朋友有幫助。
演示頁面:http://demo.hunuo.com/googlemap.html
使用Google MAP API顯示Google MAP，可以自定義坐標, 加入自己的描述, 等等。
使用步驟：
1。申請API密鑰，只需要登錄 http://code.google.com/intl/zh-CN/apis/maps/signup.html ，輸入網(wǎng)站的網(wǎng)址，如： http://demo.hunuo.com ，填寫完畢按“生成API密鑰”即可。
2。加載Google地圖API，在網(wǎng)頁<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() 是自定義的初始函數(shù)，GUnload為API內置的卸載函數(shù)。load()函數(shù)如下：
-
var map; //當前的地圖對象
-
function load() {
-
if (GBrowserIsCompatible()) {
-
map = new GMap2(document.getElementById('map_canvas')); //創(chuàng)建一個GMpa2對象，將賦值給map，并將地圖顯示在id=map_canvas的dom對象中
-
-
// 給地圖添加內置的控件，分別為：
-
// 平移及縮放控件（左上角）、比例尺控件（左下角）、縮略圖控件（右下角）
-
map.addControl(new GLargeMapControl());
-
map.addControl(new GScaleControl());
-
map.addControl(new GOverviewMapControl());
-
-
// 將視圖移到廣州互諾科技-網(wǎng)站建設
-
map.setCenter(new GLatLng(23.127889,113.280029), 13); //第一個參數(shù)是GLatLng對象，用來指定中心點的坐標，第二個參數(shù)是放大倍數(shù)
-
-
//手動創(chuàng)建一個標注
-
var point = new GLatLng(23.115800, 113.2750000); //創(chuàng)建一個坐標
-
var marker=new GMarker(point); //在此坐標創(chuàng)建一個標注
-
map.addOverlay(marker); //將此標注加入到當前地圖中
-
-
//手動加入提示信息 GEvent為Google MAP的事件管理對象, addListener可以綁定一個事件的處理函數(shù)
-
GEvent.addListener(marker, 'click',
-
function() {
-
var div=document.createElement("div"); //創(chuàng)建一個div，用于裝載提示信息，當關閉提示信息時會自動釋放對象
-
div.innerHTML="<img src='http://www.samdeer.com/images/Logo.GIF'><br><a href='http://www.samdeer.com'>網(wǎng)站建設</a>";
-
//加入提示信息
-
marker.openInfoWindow(div); //在標注上彈出提示信息層}
-
);
-
}
-
}
復制代碼
更詳細的說明，參考：http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html
互諾科技
粵公網(wǎng)安備 44010402000282號 粵ICP備09019378號-1
