2010.02.23——google map api----五岳剑派拖拽的标注

lipeng88213

浏览: 959682 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

Google 云计算

2010.02.23——google map api----五岳剑派拖拽的标注

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML ><HEAD><TITLE>五岳剑派</TITLE>
<script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"></script>

<SCRIPT type="text/javascript">
  //<![CDATA[

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

  /**
   * 这个例子演示了 Google 地图 API 的以下功能:
   *   * 可拖拽的标注
   *   * 自定义标注的图标
   *   * 计算地理距离
   *   * 事件处理（单击）
   *   * 消息提示窗口（气泡窗口）
   *   * 和文档模型(DOM)交互
   *
   * @author haogang
   */

  var targets = [
    {'name':'东岳泰山', 'pt':[36.207715, 117.144470], 'icon':'images/red'},
    {'name':'西岳华山', 'pt':[34.525793, 110.048676], 'icon':'images/blue'},
    {'name':'南岳衡山', 'pt':[27.293689, 112.806244], 'icon':'images/yellow'},
    {'name':'北岳恒山', 'pt':[39.607804, 113.656311], 'icon':'images/purple'},
    {'name':'中岳嵩山', 'pt':[34.523389, 113.005028], 'icon':'images/green'}
  ];
  
  var markers = [];          // 给用户拖拽的标注
  var targetMarkers = [];    // 显示正确答案的标注
  var showAnswer = true;     // 当前的视图模式（解题模式，答案模式）
  var map;                   // 全局的 Google Map 控件
  
  var error = 100;           // 判断正误时允许的误差，以公里为单位

  /**
   * 在表格里显示图例，帮助用户了解不同标注的含义
   */
  function loadTableItems() {
    for (i = 0; i < targets.length; i++) {
      document.write('<tr><td><img src="' + targets[i]['icon'] 
          + '.png"/>  ' + targets[i]['name'] + '</td></tr>');
    }
  }

  /**
   * 在“解题模式”和“答案模式”间切换，同时也更改切换按钮的标签
   */    
  function switchMarkers() {
    showAnswer = !showAnswer;

    // 先清除掉当前的所有标注
    map.clearOverlays();
    
    // 再根据当前模式加入对应的标注
    for (i = 0; i < targets.length; i++) {
      map.addOverlay(showAnswer ? targetMarkers[i] : markers[i]);
    }

    var switcher = document.getElementById('switcher');
    switcher.value = showAnswer ? '隐藏答案' : '显示答案';
  }
  
  /**
   * 为气泡提示窗口创建 DOM 对象，包括地点的名称和简要描述
   * @param {Number} i 该地点在 targets 数组中的下标
   */
  function createInfoWindow(i) {
    // 从网页的隐藏部分载入该地点的描述性文字
    var targetDescs = document.getElementById('targetDescs');
    var desc = targetDescs.getElementsByTagName('div')[i].innerHTML;

    // 为气泡提示窗口创建动态 DOM 对象，这里我们用 DIV 标签
    var div = document.createElement('div');
    div.innerHTML = '<div style="font-size: 9pt; width:300px"><b>'
        + targets[i]['name'] + '</b><br/>' + desc + '</div>';

    // 当用户关闭气泡时 Google Map API 会自动释放该对象  
    return div;
  }
  
  /**
   * 本函数为每个地点创建两个标注：一个给用户拖拽，另一个显示标准答案
   * @param {Number} i 该地点在 targets 数组中的下标
   */
  function createMarker(i) {

    // 先创建给用户拖拽的标注：一开始它们依次排列在地图的左上角
    // 下一行代码演示了如何将 map 控件的像素坐标转化为经纬度
    var initPt = map.fromContainerPixelToLatLng(new GPoint((i + 1) * 30, 50));
    var ico = new GIcon(G_DEFAULT_ICON, targets[i]['icon'] + '.png');

    // 参数 draggable: true 表示可拖拽
    markers.push(new GMarker(initPt, { draggable: true, icon: ico }));

    // 再创建正确答案的标注：将它们放在正确的位置上，而且是不可拖拽的
    var targetPt = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
    var marker = new GMarker(targetPt, { icon: new GIcon(ico) });
    targetMarkers.push(marker);

    // 为正确答案标注添加事件处理函数：用户单击它时会弹出气泡提示
    GEvent.addListener(marker, 'click', 
        function() {
          marker.openInfoWindow(createInfoWindow(i));
        }
    );
  }
  
  
  /**
   * 比较用户的答案和正确答案，并给用户打分
   */
  function judge() {
    var correct = 0;
    for (i = 0; i < targets.length; i++) {
      // 获得对应的两个坐标，并求出它们的距离 dist （以米为单位）
      var target = new GLatLng(targets[i]['pt'][0], targets[i]['pt'][1]);
      var marker = markers[i].getPoint();
      var dist = target.distanceFrom(marker);

      // 根据误差判断正误，并根据正误将标注的图标切换为“勾”或“差”
      if (dist > error * 1000) {
        markers[i].getIcon().image = targets[i]['icon'] + '_cross.png';
      } else {
        markers[i].getIcon().image = targets[i]['icon'] + '_tick.png';
        correct++;
      }
    }

    // 计算得分（正确率）
    var score = document.getElementById('score');
    score.innerHTML = correct * 100 / targets.length;

    // 保证切换到“解题模式”，用户才能看到图标的变化，从而知道哪些错了
    if (showAnswer) {
      switchMarkers();
    } else {
      // 刷新地图：必须重新添加标注，才能反映图标的变化
      for (i = 0; i < targets.length; i++) {
        map.removeOverlay(markers[i]);
        map.addOverlay(markers[i]);    
      }
    }
  }

  /**
   * 创建地图控件，以及两组标注
   */
  function load() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById('map'));
      // 将视图移到中国
      map.setCenter(new GLatLng(37, 107), 4);

      // 为 targets 数组中的每个地点，创建两个标注
      for (i = 0; i < targets.length; i++) { 
        createMarker(i);
      }
      // 进入“解题模式”
      switchMarkers();
    }
  }

  //]]>
  </SCRIPT>

<META content="MSHTML 6.00.3790.4357" name="GENERATOR"></HEAD>
<BODY onload="load()" onunload="GUnload()">
<TABLE width="100%">
  <TBODY>
  <TR>

    <TD style="WIDTH: 700px">
      <DIV id="map" style="WIDTH: 700px; HEIGHT: 500px"></DIV></TD>
    <TD vAlign="top"><B>请在地图中标出以下位置：</B><BR>
      <HR>

      <TABLE id="targetList" width="100%">
        <TBODY>
        <SCRIPT 
        type="text/javascript">
           loadTableItems();
        </SCRIPT>

        </TBODY></TABLE>
      <HR>
<INPUT onclick="judge()" type="button" value="评判"> <INPUT id="switcher" onclick="switchMarkers()" type="button" value="switcher"> 
      <HR>
      <B>得分：<SPAN id="score" style="COLOR: red"></SPAN></B> </TD></TR></TBODY></TABLE>
<DIV id="targetDescs" style="DISPLAY: none">
<DIV>位于山东省泰安县境的泰山，又称“岱宗”、“岱”即大山，“岱”为长辈，意即：泰山是中国大山的长辈。泰山雄踞于山东省中部，海拔1545米。 </DIV>
<DIV>西岳华山位于西安市东120公里处的华阴县城南，海拔2200米，以奇险峻秀著称，素称“天下奇险第一山”，也是著名的道教圣地之一。 </DIV>
<DIV>衡山又称南岳，位于湖南省衡山县，山势雄伟，绵延数百公里。七十二峰中以祝融、天柱、芙蓉、紫盖、石 五峰最有名。最高峰为祝融峰，海拔1290米。 

</DIV>
<DIV>五岳中以北岳恒山最高，位于山西省浑源县城南四公里处，绵延150余公里。主峰天峰领海拔2017米。高耸入云，给人以顶天立地之感。 </DIV>
<DIV>中岳嵩山，位于河南省登峰县境，因地处中原，古称“中岳”。其主峰峻极峰海拔1584米。 山峰多寺也多，有“上有七十二峰、下有七十寺”之说。 
</DIV></DIV></BODY></HTML>

分享到：