利用Google Map API在BLOG上顯示自己的Google Map

2024-04-27 13:55:17

字體：大中小

來源：轉載

供稿：網友

當當當當～大家請看下面的鏈接，哈哈，是不是看到是一小淫僧，HOO～
http://www.misuisui.com/google_map.htm
哈哈，好玩吧～是不是也想搞一個呢？Follow Me~

第一步
去 http://www.google.com/apis/maps/ 申請一個 Google Maps API key ，當然，你得有頂級域名才行。。。亂申請的你如果不放到你這個域名下，那這個就根本用不了。。。
Google會給您一段代碼，可要保存好哦～

第二步
把 http://www.misuisui.com/google_map.htm 打開，看一看里面的源化碼，我已經寫好說明了，大家照貓畫虎就行了，HOHO～主要代碼在最下面～

第三步
把第一步里申請來的 Google Maps API key 改掉代碼中的 ABQIAAAAlwlonOoTX0oPRDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA 一樣的代碼。。。

第四步
代碼里的哪個PNG圖標不好找，在網上狂搜吧。。。要不自己做一個～
嗯，還有那個坐標不好找，大家請看第四步

第五步
打開 http://www.google.com/maps
找啊找啊，找到你所在的地方，然后點那個右上角那個“Link to this page”
得到一個這樣的鏈接 http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
注意 35.86166, 104.195397 這一段數字，這就是當前地圖中心點的坐標了
把逗號后面的數字放到逗號前面變成這樣 104.195397, 35.86166
然后就是把這個數字添加到代碼中你想要添加的地方了～

第六步
根據代碼里的提示，發揮你的想象力，然后做點啥出來～做出啥來了，也告訴我一下，讓我也看看啊～
比如我就要做個友情鏈接的東東，HOHO～和我友鏈的朋友們麻煩參考第五步把你想要標在我的友情鏈接地圖上的坐標告訴我啊，HOHO～

第七步
嗯嗯，希望這幾天大家要常來這兒了，因為有一個好東東要給大家告訴大家啦～HOHO～

    function createMarker(point, baseIcon, html) {
      var icon = new GIcon(baseIcon);
      var marker = new GMarker(point, icon);

      GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml(html);
      });

return marker;
}

    function loadMap(){
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.setMapType(G_HYBRID_TYPE);
      map.centerAndZoom(new GPoint(116.429114, 39.934322), 0); //在這里116.429114, 39.934322代表地圖的中心位置，后面的0是放到最大，數字越大，地圖顯示的越多

      // 以下是定義一些基本信息
      // 陰影，陰影偏移，信息框偏移, 什么什么的
      var icon = new GIcon();
      icon.shadow = "      icon.shadowSize = new GSize(21, 29);
      icon.iconAnchor = new GPoint(10, 30);
      icon.infoWindowAnchor = new GPoint(9, 5);
      icon.infoShadowAnchor = new GPoint(9, 5);

      //在地圖上標一個圖標，點擊就出現字
      var html = '<s>你這個淫真是的，摸人家干啥啊？</s>'; //這里是顯示在信息框里的東東，支持HTML
      icon.image = "      icon.iconSize = new GSize(21, 29); //圖標的寬和高
      var point = new GPoint(116.429114, 39.934322); //圖標標在地圖的哪里

      var marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //標一個圖標完畢

      //在地圖上再標一個圖標，點擊就出現字，改的方法如上
      html = '<i>淫僧法號米隨隨～</i>';
      icon.image = "      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429424, 39.934322);

      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //標一個圖標完畢，這段代碼復制多少個，就有多少個圖標，只要改改里面的東東就可以了

      //在地圖上再標一個圖標，點擊就出現字，改的方法如上
      html = '點擊<a href="#" target="_self">這里</a>看看米隨隨是怎么整出來的～';
      icon.image = "      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429314, 39.934522);

      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //標一個圖標完畢，這段代碼復制多少個，就有多少個圖標，只要改改里面的東東就可以了

      //在地圖上再標一個圖標，點擊就出現字，改的方法如上
      html = '<div ><font color="blue">阿彌陀佛～淫僧米隨隨哪！～</font></div>';
      icon.image = "      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429714, 39.934522);

      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //標一個圖標完畢，這段代碼復制多少個，就有多少個圖標，只要改改里面的東東就可以了

      //最后一個圖標將一開始顯示下面的內容
      defaultmsg = '<div><font color="red">點擊淫僧米隨隨哪！～</font></div>'; //這里是顯示在信息框里的東東，支持HTML
      marker.openInfoWindowHtml(defaultmsg);

}

loadMap();

//]]>
</script>

出處：http://www.misuisui.com/weblog/article.asp?id=398