Google地图API 在网站上嵌入谷歌地图API

非常感谢:http://67566894.iteye.com/ 

Google的地图API很完善,用起来也不复杂。我通过JavaScript实现了一个简单的Google地图,并带有地图标记。 
   如果你的网站有域名而不是localhost,则需要根据域名在Google官网上申请一个KEY,替换我提供的代码中的key。

Java代码 
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.     <head>  
  5.     <script  
  6.         src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true;  
  7.         key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"  
  8.         type="text/javascript"></script>  
  9.         //author:67566894   <script language="javascript" type="text/javascript">  
  10.     function load() {     //加载地图  
  11.         if (GBrowserIsCompatible()) {   
  12.             var map = new GMap2(document.getElementById("map"));   
  13.             map.addControl(new GSmallMapControl());    //放大缩小  
  14.             map.addControl(new GMapTypeControl());     //地图种类  
  15.             map.enableScrollWheelZoom();    //启用鼠标滚轮  
  16.             map.setCenter(new GLatLng(39.9000116.3000), 6);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"  
  17.          
  18.             function createMarker(point, address,name,tel) {  //创建标记内容及标记的鼠标事件  
  19.                var marker = new GMarker(point);  
  20.                var html = '<div>'+  
  21.                    '<a >Name:'+ name +'</a><br/>'+  
  22.                    '<a >Address:'+address +'</a><br/>'+  
  23.                    '<a >telephone:'+tel +'</a>'+  
  24.                    '</div>';  
  25.                GEvent.addListener(marker, "mouseover", function() {  
  26.                    marker.openInfoWindowHtml(html);  
  27.                });  
  28.                GEvent.addListener(marker, "mouseout", function() {  
  29.                    marker.closeInfoWindow();  
  30.                });  
  31.                GEvent.addListener(marker, "click", function() {  
  32.                    map.setCenter(point, 12);   
  33.                });  
  34.                return marker;  
  35.            }  
  36.            var point = new GLatLng(39.9000,116.3000);     //设置标记  
  37.            map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记  
  38.        }    
  39.    }      
  40. </script>  
  41.     </head>  
  42.     <body onload="load()">  
  43.         <div id="map" style="width: 750px; height: 500px"></div>  
  44.     </body>  
  45. </html>  

猜你喜欢

转载自justsee.iteye.com/blog/666190