如何在Html中插入谷歌地圖？

2019-11-09 18:09:19

字體：大中小

來源：轉載

供稿：網友

<!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">  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <title>Google Maps javaScript API Example</title><!-- Ajax地圖搜索開始(如果只要簡單的地圖,這些可以去掉) -->  <!-- Note:    Make sure to replace the &key=internal with &key=~the value of your key~    in both the maps API script load and in the Ajax Search API script load statements  -->  <!-- maps api, ajax search api, map search control code -->  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QQcKaV3amGYXXpfw"    type="text/Javascript"  charset='utf-8'></script>  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QqcKaV3amGYXXpfw"    type="text/javascript"  charset='utf-8'></script>  <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"    type="text/javascript"  charset='utf-8'></script>  <!-- ajax search stylesheet, map search stylesheet -->  <link href="http://www.google.com/uds/CSS/gsearch.css" rel="stylesheet"    type="text/css"/>  <link href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css"    rel="stylesheet" type="text/css"/>  <style type="text/css">    body, table, p{      background-color: white;      font-family: Arial, sans-serif;      font-size: 13px;    }    #mapsearch {      width : 400px;      margin-left: 10px;      padding: 4px;      border : 1px solid #f9f9f9;    }  </style><!-- ajax地圖搜索結束 --> <!--以下代碼是必須的。 這一段代碼中可以修改key的參數,key的產生可以到以下地址： http://code.google.com/apis/maps/signup.html 拖到頁面底部,輸入地址后點獲取API就可以。 注：如果你輸入的地址已經被注冊過key，將無法得到key并且沒有提示，只是跳到登錄頁。再試也沒有用。 -->    <script  src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QqcKaV3amGYXXpfw"            type="text/javascript"  charset='utf-8'></script>    <script language="javascript" type="text/javascript"   charset='utf-8'>    //<![CDATA[    function load() {      if (GBrowserIsCompatible()) {        var map = new GMap2(document.getElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  //以上GSmallMapControl添加左上角放大縮小的控件  //GMapTypeControl添加右上角[地圖][衛星][混合地圖控件]  //注：在以上兩句代碼前面或之間不可以寫注釋，否則看不到控件哦。嘿嘿，注釋寫這里喇。  //如果只要簡單地圖，以上兩句可以不要  //參數(經偉度)：23.17336637556459, 113.24979543685913  //獲得方法：打開http://ditu.google.cn/，輸入你要設成地圖中心點的地址。  //在IE地址欄中輸入以下代碼按回車：javascript:void(application.getMap().getCenter()));  //此時將會彈出一個對話框，里面的內容就是你要的經偉度。  //參數(地圖放大倍數):15  //設得太高可能看不到地圖。        map.setCenter(new GLatLng(23.173987756729552, 113.24978470802307), 15);      }   //如果只是想要一張最簡單的地圖，以下代碼可以不加  //隨機產生10個地理標識。如不需要可以不加  var bounds = map.getBounds();  var southWest = bounds.getSouthWest();  var northEast = bounds.getNorthEast();  var lngSpan = northEast.lng() - southWest.lng();  var latSpan = northEast.lat() - southWest.lat();  for (var i = 0; i < 10; i++) {    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),          southWest.lng() + lngSpan * Math.random());    map.addOverlay(createMarker(point, i + 1));  }  //使用自定義圖標創建標注  var baseIcon = new GIcon();  baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";  baseIcon.image="http://labs.google.com/ridefinder/images/mm_20_yellow.png";  baseIcon.iconSize = new GSize(20, 34);  baseIcon.shadowSize = new GSize(37, 34);  baseIcon.iconAnchor = new GPoint(9, 34);  baseIcon.infoWindowAnchor = new GPoint(9, 2);  baseIcon.infoShadowAnchor = new GPoint(18, 25);     //創建中心點標注  var center = new GMarker(map.getCenter(),baseIcon);  GEvent.addListener(center, "click", function() {   center.openInfoWindowHtml("廣州市白云區三元里大道959號");  });  //添加標注到地圖上。  map.addOverlay(center);  //標識地圖中心  //map.openInfoWindow(map.getCenter(),        //          document.createTextNode("we are here"));  //創建一個目標地點的標識。  //通常我們做google地圖是為了將企業地址標識到地圖上,方便別人找到。比如說(富華酒店)。  //以下代碼就是在打開地圖的時候，在地圖中心點顯示一個云一樣的框框，指示說這里就是目標地點。   /*  var marker = new GMarker(map.getCenter());  GEvent.addListener(marker, "click", function() {    marker.openInfoWindowTabsHtml(infoTabs);  });  map.addOverlay(marker);  marker.openInfoWindowTabsHtml(infoTabs);  */  //以下是添加一個地理標識(可以讓使用者拖動的,不一定實用)  /*  var center = new GLatLng(23.173987756729552, 113.24978470802307);  var mk1 = new GMarker(center, {draggable: true});  GEvent.addListener(mk1, "dragstart", function() {    map.closeInfoWindow();    });  GEvent.addListener(mk1, "dragend", function() {    mk1.openInfoWindowHtml("Just bouncing along...");    });  map.addOverlay(mk1);  */  //編碼折線。我不是繪測專家，所以這里的含義不太懂，想要了解更多請訪問以下網址：  //http://www.codechina.org/doc/google/gmapapi/#Display_Info_Windows_Above_Markers  /*  var polyline = new GPolyline([   new GLatLng(23.1733, 113.2497),   new GLatLng(37.1833, 113.2697),   new GLatLng( 37.2733, 113.2897)  ], "#FF0000", 10);  map.addOverlay(polyline);  */          //如果想要添加動畫效果,請看這里吧。  /*  window.setTimeout(function() {    map.panTo(new GLatLng(23.173987756729552, 113.24978470802307));  }, 1000);  */     } //在參數中可以設定顯示的文字 /* 這里如果要以Tab頁簽形式顯示地圖,可以加上。 var infoTabs = [   new GInfoWindowTab("center", "We are here!"),   new GInfoWindowTab("Tab #2", "This is tab #2 content") ]; */ //參數一是頁簽名字,參數二是顯示的頁簽內容,內容可以是中文，但是如果你用EditPlus編輯代碼，文件必須以UTF-8的格式保存，而不僅僅是在面頁上設置chartset="utf-8"。 var infoTabs = [   new GInfoWindowTab("center", "We are here!") ];  //創建地理標識的方法。 function createMarker(point, number) {   var marker = new GMarker(point);   GEvent.addListener(marker, "click", function() {  marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");   });   return marker; }    //]]>    </script>   </head>  <body onload="load()" onunload="GUnload()">    <div id="map" style="width: 500px; height: 300px"></div> <div id="mapsearch">Loading...</div>  </body></html>
轉自http://m.blog.csdn.net/article/details?id=5697384