<!--
Created by Practicer2015on 2014-12.
Copyright 2014 Practicer2015. All rights reserved.
功能:地图上打地鼠
-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=你自己的key"></script>
<script language="javascript">
var mapObj;
var marker = new Array();
var infowindow = new Array();
var lng,lat;
var arr = new Array();
var state = 0;
var myvar;
var geo;
//加载地图
function mapInit() {
/*利用坐标拾取器主要拾取了故宫四个角的坐标*/
arr.push(new AMap.LngLat("116.392078","39.92254"));
arr.push(new AMap.LngLat("116.402335","39.923034"));
arr.push(new AMap.LngLat("116.402764","39.913061"));
arr.push(new AMap.LngLat("116.392293","39.912995"));
arr.push(new AMap.LngLat("116.392078","39.92254"));//同一个坐标,形成封闭区域
mapObj = new AMap.Map("iCenter");
if(null != mapObj)
{
mapObj.setCity("北京");
mapObj.setZoom(14);
mapObj.plugin('AMap.Geolocation', function () {
geo = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
mapObj.addControl(geo);
AMap.event.addListener(geo, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geo, 'error', onError); //返回定位出错信息
})
mapObj.setFitView();
}
}
function startgame()
{
if (state<=0)
{
state = 1;
document.getElementById("one").value = "休息一会,再玩";
myvar = setInterval(function(){imhere()},3000);
}
else
{
state = 0;
hidegame();
document.getElementById("one").value= "开始游戏,Ready Go?";
window.clearInterval(myvar);
}
}
function imhere(){
var num = GetRandomNum(1,5);
// alert(arr[1].lng);
marker = new AMap.Marker({
//icon:"http://webapi.amap.com/images/marker_sprite.png",
icon:"http://www.52nx.net/article/UploadPic/2012-6/201262521331876818.png",
draggable:true,
position:new AMap.LngLat(arr[num-1].lng,arr[num-1].lat)
});
marker.setMap(mapObj); //在地图上添加点
infoWindow = new AMap.InfoWindow({
autoMove:true,
content:"小样,我在这里。来抓我啊!"
});
if (null != infoWindow )
{
infoWindow.open(mapObj,new AMap.LngLat(arr[num-1].lng,arr[num-1].lat));
}
mapObj.setFitView();
var myvar =setTimeout(function(){hidegame()},500);
};
function hidegame(){
infoWindow.hide();
marker.hide();
}
/*获取当前位置信息 */
function getCurrentPosition () {
if(marker.length>0)
{
document.getElementById("two").value = "兵已派出,抓捕中 ...";
document.getElementById("two").disable();
document.getElementById("two").disabled = true;
geolocation.getCurrentPosition();
}
else
{
alert("都抓完了,你来晚了!");
}
};
/* *监控当前位置并获取当前位置信息*/
function watchPosition () {
geolocation.watchPosition();
};
/*解析定位结果 */
function onComplete (data) {
var str = '<p>抓捕成功,可以再玩一局。</p>';
// str += '<p>经度:' + data.position.getLng() + '</p>';
// str += '<p>纬度:' + data.position.getLat() + '</p>';
// str += '<p>精度:' + data.accuracy + ' 米</p>';
// str += '<p>是否经过偏移:' + (data.isConverted ? '是' : '否') + '</p>';
alert(str);
//result.innerHTML = str;
document.getElementById("two").value = "抓捕行动";
document.getElementById("two").enable();
};
/*
*解析定位错误信息
*/
function onError (data) {
var str = '<p>抓捕失败,继续追踪</p>';
str += '<p>错误信息:'
switch(data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
str += '</p>';
alert(str);
document.getElementById("two").value = "重新抓捕";
document.getElementById("two").enable();
//result.innerHTML = str;
};
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
</script>
</head>
<body οnlοad="mapInit();">
<div id="iCenter" ></div>
<div class="demo_box">
<input type="button" id="one" value="开始游戏,Ready Go?" οnclick="javascript:startgame()"/>
<input type="button" id="two" value="抓捕行动" οnclick="javascript:getCurrentPosition()"/>
<!--<input type="button" id="two" value="我的监控" οnclick="javascript:watchPosition()"/> -->
</div>
</body>
</html>