在项目中引用google地图

首先去 http://code.google.com/intl/zh-CN/apis/maps/signup.html 

我的网址中填入 你测试的页面 比如测试时 地址是  http://localhost:8080/mapTest

点击生成密钥 页面上 不止有密钥 还有密钥的使用方法(生成之前必须要先用google帐号登录,如果没有帐号 点击生成跳转到注册页面) 

 

在项目中假如一个测试页面 Google.jsp

<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>MyEclipse Google Maps Example</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">

  <script type="text/javascript"

//后面的key=这里就是生成的key  如果key不对 页面一片空白的
   src="http://www.google.com/jsapi?key=ABQIAAAAR_pdgDF_E-mJFQXMRJVOHRRP189eykzPrrAV7tRgT92eURxrGxSfti2JdFk9U2km8cMzgQmeW3b7Iw"></script>
  <script type="text/javascript">

  //加载地图到 id为maps的div中
     google.load("maps", "2");
     var map = null;
     var geocoder = null;
     google.setOnLoadCallback(function initmap() {
      map = new google.maps.Map2(document.getElementById("map"));
      geocoder = new google.maps.ClientGeocoder();
     });    
  </script>
  <script type="text/javascript" src="resources/map.js"></script>
 </head>
 <body>
  <h1>
   MyEclipse Google Maps Example
  </h1>
  
  <hr>
  <table>
   <tr>
    <td valign="top">
     <table>
      <tr>
       <td valign="top" align="left">
        Address:
        <br>
       </td>
       <td />
      </tr>
      <tr>
       <td valign="top" colspan="2">
        <form onsubmit="updateAddress(addrField.value); return false">
         <input type="text" id="addrField">
         <input type="submit" value="Find" />
        </form>
       </td>
      </tr>
      <tr>
       <td align="right">
        Latitude:
       </td>
       <td>
        <input type="text" id="latField" style="width: 95px" />
       </td>
      </tr>
      <tr>
       <td align="right">
        Longitude:
       </td>
       <td valign="top">
        <input type="text" id="lngField" style="width: 95px">
       </td>
      </tr>
     </table>
    </td>
    <td>


     <div id="map"
      style="border: blue 1px solid; width: 320px; height: 240px">
     </div>
    </td>
   </tr>
  </table>
 </body>
</html>

posted @ 2011-11-30 13:52  饺子吃遍天  阅读(106)  评论(0编辑  收藏  举报