2010.02.23——google map api----五岳剑派 拖拽的标注
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&v=2&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>