JS-API 地图上打地鼠

最新推荐文章于 2025-08-23 15:43:04 发布

原创最新推荐文章于 2025-08-23 15:43:04 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文介绍了一个基于高德地图API的打地鼠游戏实现。游戏中，地鼠随机出现在地图上的指定区域内，玩家需要通过点击来“捕捉”地鼠。文章详细展示了如何初始化地图、设置定位功能、启动游戏流程及实现地鼠随机出现等功能。

<!--
      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;
};