如何調用Google地圖?


在建設網站中用到地圖是很常見的,在國內大部分都是用百度地圖,但是有時候可能會用到國外地址,這時候就只能使用谷歌地圖了。

方法一、使用框架引入谷歌地圖

用框架引入谷歌地址是最簡單的方法,不是專業開發人員也可以操作。登陸ditu.google.cn地圖,輸入地址信息,如:"上海東方明珠",把地圖移動到合適的視角,點擊分享鏈接后,有兩個信息。第一個是一個網址,用於在瀏覽器中打開的;第二個是一個框架的代碼,網站中通常使用這個代碼。把代碼復制到網站中去就可以了,里面可以自己設定度度,高度,語言等信息。

方法二、使用谷歌地圖api開發

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>    
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  <html>    
      <head>    
      <script    
          src="http://maps.google.com/maps?file=api&v=2&sensor=true;    
          key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"    
          type="text/javascript"></script>    
          //author:67566894   <script language="javascript" type="text/javascript">    
      function load() {     //加載地圖    
          if (GBrowserIsCompatible()) {     
              var map = new GMap2(document.getElementById("map"));     
              map.addControl(new GSmallMapControl());    //放大縮小    
              map.addControl(new GMapTypeControl());     //地圖種類    
              map.enableScrollWheelZoom();    //啟用鼠標滾輪    
              map.setCenter(new GLatLng(39.9000, 116.3000), 6);   //地圖坐標 三個參數分別為 "緯度" "經度" "比例尺"    
             
              function createMarker(point, address,name,tel) {  //創建標記內容及標記的鼠標事件    
                 var marker = new GMarker(point);    
                 var html = '<div>'+    
                     '<a >Name:'+ name +'</a><br/>'+    
                     '<a >Address:'+address +'</a><br/>'+    
                     '<a >telephone:'+tel +'</a>'+    
                     '</div>';    
                 GEvent.addListener(marker, "mouseover", function() {    
                     marker.openInfoWindowHtml(html);    
                 });    
                 GEvent.addListener(marker, "mouseout", function() {    
                     marker.closeInfoWindow();    
                 });    
                 GEvent.addListener(marker, "click", function() {    
                     map.setCenter(point, 12);     
                 });    
                 return marker;    
             }    
             var point = new GLatLng(39.9000,116.3000);     // 設置標記    
             map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入標記    
         }      
     }        
  </script>    
      </head>    
      <body onload="load()">    
          <div id="map" style="width: 750px; height: 500px"></div>    
      </body>    
  </html> 

PS:如果有寫錯的地方,歡迎指出,謝謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM