noran 發問時間: 電腦與網際網路程式設計 · 1 0 年前

網頁製作結合google map

請問一下有人知道如何將google map上設定的目標點.原有的顯示框上加上自己的照片縮圖.或者是這樣( http://www.mutekiya.com/shop/index.html )如這間店的製作方式製做呢?!....thnx~

1 個解答

評分
  • mh
    Lv 7
    1 0 年前
    最佳解答

    這段小小教學並不是針對初學者 (怎樣知道自己是不是初學者?你知道 Java 跟 Javascript 分別嗎?你能掌握 html,只用純文字處理器就能寫個圖文並茂的靜態網頁等等...您如果只會繳錢玩網誌,蒐集人家的音樂撥放器小玩藝,那勸你打消念頭)

    1. 去 Google Map API 網頁 (http://www.google.com/apis/maps/) 登記使用。

    2. 點選「Sign up for a Google Maps API key」。

    3. 在「I have read and agree with the terms and conditions」前面打勾,並在「My web site URL:」填入你的網址,然後按 Generate API Key。

    4. Google Map API 會產生一個一開始的型版的 HTML 代碼 (不要問我這裡的 Javascript 能不能轉 iframe,只要你看過代碼有這個念頭表示你還是初學者),貼到自己申請的網頁空間 (不會申請網頁空間?恩,不要繼續讀了....)裡頭的靜態網頁 (.html / .htm),然後開始改。

    5. 技術文件參考:

    http://www.google.com/apis/maps/documentation/inde...

    http://www.google.com/apis/maps/documentation/refe...

    6. 那個日本站用的範例在 map.setCenter 後的代碼:

    <!-- 加控制棒 -->

    map.addControl(new GLargeMapControl());

    <!-- 圖示設定 -->

    gpObj = new GPoint(緯度,經度); <!-- 跟 setCenter 的值一樣,要不剛好相反 -->

    iconObj = new GIcon();

    iconObj.image = "圖檔網址";

    iconObj.iconSize = new GSize(寬,高);

    iconObj.iconAnchor = new GPoint(x座標,y座標);

    marker = new GMarker(gpObj, iconObj);

    map.addOverlay(marker);

    它設了三個 ICONs。詳細函式庫請參考 google api reference 如上。

還有問題?馬上發問,尋求解答。