首頁 > 其他

Google Map API 基本使用方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
由於工作需要，這兩天在看GOOGLE MAP 的 API，需要在公司的網站上使用地圖。今天把看過之後的一點使用方法，跟大家一起分享：

示範地址：http://www.yaohaixiao.com/code/googlemap%20sample/index.htm

程式碼/*
==============================================================================
                                      Google Map API
==============================================================================
方法說明：
   1、GBrowserIsCompatible() -- 是否支援Google Map API
   2、shopLat -- 酒店的經度座標，
      shopLng -- 酒店的緯度座標
   3、new GLatLng(shopLat, shopLng) -- 設定經緯度
   4、map.setCenter(new GLatLng(shopLat, shopLng), 14) -- 設定地圖預設的中心點經緯度
      參數說明：
      new GLatLng(shopLat, shopLng) -- 設定中心點的經緯度
      14 -- 地圖的預設縮放比例大小值，範圍為1 - 18
   5、new GMap2(document.getElementById("shopgooglemap")) -- 擷取顯示的地圖容器
   6、map.setMapType(G_NORMAL_MAP); -- 設定顯示地圖的類型
      可選值：
      1. G_NORMAL_MAP -- 預設地圖樣式
      2. G_SATELLITE_MAP -- Google Earth 衛星地圖
      3. G_HYBRID_MAP -- 混合模式地圖
   7、new GIcon(G_DEFAULT_ICON) -- 設定標記樣式
   8、addControl() -- 給地圖添加控制項
      常用的可選控制項：
      1. new GLargeMapControl() -- 大的地圖縮放層級控制項
      2. new GOverviewMapControl() -- 地圖縮圖控制項  
      3. new GScaleControl() -- 比例尺控制項
      4. new GMapTypeControl() -- 地圖類形選擇控制項
   9、enableDoubleClickZoom() -- 雙擊（滑鼠右鍵）放大/（滑鼠左鍵）縮小地圖比例
  10、map.enableScrollWheelZoom() -- 滾動滑輪方法（向前）放大/（向後）縮小地圖比例
  11、enableContinuousZoom() -- 允許連貫改變地圖比例
  12、createMarker(latlng) -- 自訂方法：
      方法說明：
      new GMarker(latlng) -- 在地圖中設定標籤，參數latlng -- 標籤的座標
      Event.addListener(marker,event,function) -- 給標籤設定事件
      參數說明：
      marker -- 標籤對象,
      event -- 事件名稱
      function -- 時間的處理函數
      openInfoWindowHtml(latlng, myHtml) -- 將資訊框添加到標籤上
      參數說明：
      latlng -- 標籤座標,
      myHtml -- 提示資訊的HTML字串
===============================================================================  
擷取地圖中心座標：javascript:void(prompt('中心座標',gApplication.getMap().getCenter()));        
===============================================================================
*/

function initMap(){
    if(GBrowserIsCompatible()){
         var shopLat=message[0][0];
         var shopLng=message[0][1];
        
         var map = new GMap2(document.getElementById("shopgooglemap"));
         map.setCenter(new GLatLng(shopLat, shopLng), 14);
            
         function createMarker(latlng){
            var marker = new GMarker(latlng);
                marker.value=0;
            
            GEvent.addListener(marker,"click", function(){
                var myHtml = "<span id=/"shopInfo/">";
                    myHtml += "<h2>" + message[1][0] + "</h2><br />"
                for(var j=1;j<message[1].length;j++){
                    myHtml += message[1][j]+"<br />";
                }
                    myHtml +="</span>";
                map.openInfoWindowHtml(latlng, myHtml);
                }
            );
            return marker;
         }

         var point = new GLatLng(shopLat,shopLng);
         map.addOverlay(createMarker(point));
        
         map.enableDoubleClickZoom();
         map.enableScrollWheelZoom();
         map.enableContinuousZoom();
        
         map.addControl(new GLargeMapControl())
         map.addControl(new GOverviewMapControl());
         map.addControl(new GScaleControl());  
    }
    else{
        alert("對不起，您的瀏覽器不支援建立地圖！")    
    }
}

使用起來超簡單，google 的牛人們為我們把一切都設計好了。看看頁面代碼：

程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>金錢豹利苑酒家訂餐地圖---訂餐小秘書</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/map.css" rel="stylesheet" type="text/css" meida="all" />
<!--API KEY FOR www.fg114.com(ABQIAAAAkXrmByB7rkDtXDH8HNv_WRQzb_-fHHgqrp5CI71PBMVJnXAVnhRuj7Vkn4c84_d2ZthtPuycFDkAvg)-->
<script language="javascript" type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAkXrmByB7rkDtXDH8HNv_WRQzb_-fHHgqrp5CI71PBMVJnXAVnhRuj7Vkn4c84_d2ZthtPuycFDkAvg"></script>
<script language="javascript" type="text/javascript">
<!--
// Hotel brief infomation message
var
message =[["31.19095130514533","121.38208150863647"],
["金錢豹利苑酒家","菜    系：粵菜 廣東菜 燕鮑翅","人均消費：250-500元","地    址：
延安西路3162號金錢豹大酒店2樓近程家橋路","上班時間： 11:00-14:30，17:00-22:30
","訂位電話：<strong>021-57,57,5777！我吃，我吃，我吃吃吃！ </strong>"]];
      
//-->    
</script>    
<script language="javascript" type="text/javascript" src="js/fgMap.js"></script>
</head>
<body onunload="GUnload()">
<div id="header">
     <h1><a href="http://www.57575777.com/" target="_blank">訂餐小秘書</a></h1>    
     <ul>
          <li id="nav-first" ><a href="/Default.aspx" target="_blank">首頁</a></li>
          <li><a href="/members/MemberDefault.aspx" target="_blank">會員登入/積分查詢</a></li>
          <li><a href="/CommonHtml/57jf.aspx" target="_blank">積分兌獎</a></li>
          <li><a href="/members/MemberDefault.aspx?type=2" target="_blank">餐飲經理人專區</a></li>
          <li><a href="/members/MemberAction.aspx" target="_blank">免費註冊</a></li>
          <li><a href="/0/0/SH/1/0/0/1/0/0/1/SearchRslt.aspx" target="_blank">折扣餐廳</a></li>
          <li><a href="/ResManage/resmanage.aspx" target="_blank">自助管理</a></li>
          <li id="nav-last"><a href="/CommonHtml/Market.aspx" target="_blank">行銷活動</a></li>
     </ul>    
</div>
<h1>金錢豹利苑酒家訂餐地圖</h1>
<div id="shopgooglemap"></div>
<script language="javascript" type="text/javascript">
<!--
initMap();
//-->
</script>
<div id="footer">
<p>
上海最大、最全的訂餐平台。為您顧問式搜羅全上海所有餐廳、飯店和美食。預訂餐廳、飯店全程服務，享受VIP折扣，獲得驚喜積分。提供優質實惠的婚宴、團宴服務。
</p>
<p>
<a
href="/CommonHtml/friendtxt.aspx">網友來稿</a> | <a
href="/CommonHtml/link.aspx">友情連結</a> | <a
href="/CommonHtml/AboutWebSite.aspx">關於本站</a> | <a
href="/CommonHtml/Job.aspx">誠聘英才</a> | <a
href="#1">合作入口</a> | <a href="#"
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.57575777.com/');">設定首頁</a> | <a href="#" onclick="window.external.addFavorite('http://www.57575777.com/','訂餐小秘書');">加入收藏夾</a>
</p>
<p>
Copyright 2007 上海訂餐中心 www.57575777.com, All Right Reserved.    滬ICP備05062273號
</p>    
</div>
</body>
</html> 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More