日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)

發布時間：2024/4/15 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在你的博客中添加Google地圖(Use Google Map API On Your Bolg)

*+申請一組 Google Maps API Key

在使用 Google Maps API 之前，你必須向 Google 申請到一組 Key ，申請的方法很簡單：

  • 首先，先決定你的網頁會出現在哪個 URL ，例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道該網頁的 URL 應該會是 http://blog.yam.com/syshen/archives/XXXX.html ，前面包含到最后一個目錄的字符串便是要來申請 Key 的基準，也就是 http://blog.yam.com/syshen/archives/ 。
  • 以你的賬號登入 Google ，如果你還沒有賬號，請到 https://www. google .com/accounts/ 申請。
  • 連到 Google Maps API Sign Up 網頁 將 (1) 所決定的 URL 填入，并按 "Generate API Key" 取得 Key 。
  • 最后會出現三個方塊，分別是你取得的 Key ，你指定的 URL ，以及一個范例。建議是將范例中的 <script src="..."></script> 整行 Copy/Paste 下來。

    • Goole Maps API 使用上有些法律上的限制要注意：

  • 你的 Google Maps 服務必須免費開放給一般使用者。
  • 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量，請主動聯絡 Google 。
  • Google 會不定期更新 API ，你有責任跟著更新你的網頁中的 API 。
  • 你不能更改或隱藏 Google 的 logo 。
  • Google 有權力以后在地圖上放廣告，而你不能更改或破壞這些廣告。
  • 有些地圖應用是 Google 不希望看到的，例如指明哪些地方可以購買到毒品或是任何違法行為。

    • ?

    <IFRAME>標簽代碼 -- 插入到您想顯示的地方



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <style type="text/css">
    v:* {
    behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=2&key=YourKey"
    type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load(){ //加載google地圖API
    if (GBrowserIsCompatible()){ //判斷當前瀏覽器是否支持
    var map = new GMap2(document.getElementById("map")); //取得map對象

    //設置顯示區域的中心點(經度,緯度)
    var center_point = new GLatLng(38.41055825094609, 115.42236328125);
    map.setCenter(center_point, 6); //參數:1.中心點變量 2.精度值(高度值?)
    map.addControl(new GSmallMapControl()); //加入縮放按鈕
    map.addControl(new GScaleControl()); //加入小地圖顯示
    //顯示標記所用的圖片(未使用陰影圖片)
    var icon1 = new GIcon();
    icon1.image = "http://www.yoursite.com/images/a.gif"; //圖片所在位置
    icon1.iconSize = new GSize(16, 16); //圖片大小
    icon1.iconAnchor = new GPoint(8, 13); //圖片的錨點

    var home_point = new GLatLng(37.056136,114.457626); //標記坐標
    //添加標記,參數:1.坐標 2.標記圖片(第二個參數省略以后,用默認圖片)
    map.addOverlay(new GMarker(home_point, icon1));

    //折線終止點
    var go_point = new GLatLng(39.98738,116.320152);

    //添加折線
    var second_points = []; //折線點數組
    second_points.push(home_point); //添加第一個點
    second_points.push(go_point); //添加第二個點
    map.addOverlay(new GPolyline(second_points)); //添加折線

    //添加自定義控件(實現地圖與衛星圖的轉換)
    function TextualZoomControl() {
    }

    TextualZoomControl.prototype = new GControl();

    TextualZoomControl.prototype.initialize = function(map) {
    var container = document.createElement("div");

    var zoomInDiv = document.createElement("div");
    this.setButtonStyle_(zoomInDiv);
    container.appendChild(zoomInDiv);
    zoomInDiv.appendChild(document.createTextNode("地圖"));
    GEvent.addDomListener(zoomInDiv, "click", function() {
    map.setMapType(G_NORMAL_MAP); //改變形式為地圖
    });

    var zoomOutDiv = document.createElement("div");
    this.setButtonStyle_(zoomOutDiv);
    container.appendChild(zoomOutDiv);
    zoomOutDiv.appendChild(document.createTextNode("衛星圖"));
    GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.setMapType(G_HYBRID_MAP); //改變形式為衛星圖
    });

    map.getContainer().appendChild(container);
    return container;
    }

    TextualZoomControl.prototype.getDefaultPosition = function() {
    //自定義控件的顯示位置
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(55, 7));
    }

    TextualZoomControl.prototype.setButtonStyle_ = function(button) {
    //自定義控件的樣式
    button.style.color = "#ffffff";
    button.style.backgroundColor = "#000000";
    button.style.font = "small Arial";
    button.style.padding = "2px";
    button.style.marginTop = "5px";
    button.style.textAlign = "center";
    button.style.width = "3em";
    button.style.cursor = "pointer";
    }

    //添加自定義控件
    map.addControl(new TextualZoomControl());
    }
    }

    //]]>
    </script>
    </head>
    <body >
    <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
    </body>
    </html>

    HTML的相關說明:

    1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    2. <style type="text/css">
    v:* {
    behavior:url(#default#VML);
    }
    </style>
    說明: 兩個是為了在IE下, 正常顯示折線而添加的

    3. <script src="http://maps.google.com/maps?file=api&v=2&key=YourKey" type="text/javascript"></script>
    說明:這里的YourKey就是要放你上面申請的Key的值的地方

    4. <body>標簽的load()事件和GUnload()事件
    說明: 前者是頁面直接加載googlemap, 后者會消除大多數導致內存泄露的循環引用, 以避免您應用程序可能帶來的內存泄露問題
    5. <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
    說明:這個div標簽,是顯示google地圖的標簽,可以設定寬度和高度,border是邊框,我是為了適應我的模板加上的

    官方文檔 :
    Google 地圖API( 官方中文)
    Google 地圖API 博客( 官方英文)
    關于IE 下顯示折線的官方解釋

    ?參考資料：[1]http://www.j2megame.org/wupei/blog.php/myblog/other/2007/08/29/google-map-api

    [2]syshen's blog http://blog.yam.com/syshen

    轉載于:https://www.cnblogs.com/penglink/archive/2009/02/25/1398181.html

    總結

    以上是生活随笔為你收集整理的【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。