Google 地图JavaScript调用范例

2008-10-15 09:00:00 | 【大中小】

提示：试试看在已有的标注上单击，或者拖拽它们！

通过Google地图提供的API，使用JavaScript调用，初始可以准确定位经度和纬度，放在网站上标明自己地点，非常实用

第一步：
在<head>区添加以下代码及引用

 <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAABpHeOXw1I5UJ-vtXYWbX1RTtUYYspNpTg3aC9tW1t3Hys3v8WRR42Jn_eUcxka6INVndNAyUtY0z7w" type="text/javascript"></script>
  <script src1="http://ditu.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>

  <!-- 包含自定义控件的源文件 -->
  <script src="google-maps-api.js" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

  // Copyright 2007 Google Inc.
  // All Rights Reserved.

  /**
   * 这个例子演示了 Google Map API 的以下功能:
   *   * 使用自定义控件
   *
   * 注意：为了在 IE6 中正常显示折线，必须在网页的 <HTML> 标签中加上：
   *   <html xmlns:v="urn:schemas-microsoft-com:vml">
   *
   * @author haogang
   */
  

  /**
   * 创建地图控件，并添加一些基本的控件
   */
  function load() {
  
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById('map'));
      
      // 给地图添加内置的控件，分别为：
      // 平移及缩放控件（左上角）、比例尺控件（左下角）、缩略图控件（右下角）
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      map.addControl(new GOverviewMapControl());
      
      // 添加自定义的控件
      map.addControl(new GRulerControl());

      // 将视图移到北京
      map.setCenter(new GLatLng(39.918953,116.389503), 13);
    }
  }

  //]]>
  </script>

点击下面链接下载google-maps-api.js文件
http://www.sharejs.com/code/ajax/google-maps-api.js

第二步：
在<body>区添加以下代码

<b>提示：试试看在已有的标注上单击，或者拖拽它们！</b>
    <div id="map" style="width: 700px; height: 500px;"></div>

第三步：
修改<body>标签，添加相关事件

<body onload="load()" onunload="GUnload()">

下载"Google 地图JavaScript调用范例"

推荐给朋友

上一篇：只能输入英文和数字
下一篇：表格操作控制

Google 地图JavaScript调用范例

下载"Google 地图JavaScript调用范例"

相关资源