基於高德地圖JSAPI 開發移動端地圖紅包

時間 2019-11-11
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紅包</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/aui.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/index.css">
    <style>
        html,
        body{
            margin: 0;
            padding: 0;
        }
        #container {width:100%;}
        .amap-logo,.amap-copyright{
            display: none !important;
        }
        .money{
            width: 1.2rem;
            position: absolute;
            top:0;
            left: 0;
            z-index: 10000;
        }
        .mask_show{
            width: 100%;
            height: calc(100% - 50px);
            position: fixed;
            top: 0;
            display: none;
            background: rgba(0,0,0,0.7);
            z-index: 10001;
        }
        .mask_money{
            width: 100%;
            height: 100%;
        }
        .mask_money img{
            width: 12rem;
            margin-bottom: 8rem;
            position: relative;
        }
        .mask_money_conter{
            position: relative;
        }
        .mask_money_content{
            z-index: 10002;
            color: #fff;
            position: absolute;
            top: 7rem;
            text-align: center;
            width: calc(100% - 20px);
            margin: 0 10px;
        }
        .bonus{
            /*color: #FFF75C;*/
            font-size: .825rem;
            margin-bottom: 20px;
        }
        .bonus_btn{
            background: #fffa39;
            border:none;
            color: red;
            font-weight: 500;
        }
        .hide{
            position: absolute !important;
            width: 60px !important;
            height: 60px;
            bottom: -70px;
            left: 37%;
        }
        a{
            color: #666;
        }
        a:link{text-decoration:none;}
        a:visited {text-decoration:none;}
        a:hover {text-decoration:none;}
        a:active {text-decoration:none;}
    </style>
</head>
<body>
<div id="container"></div>
</body>
<script src="__TMPL__/public/assets/js/jquery-1.11.1.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=*****************"></script>

<script type="text/javascript">

    $("#container").height($(window).height() - 50);
    //地圖初始化時，在地圖上添加一個marker標記,鼠標點擊marker可彈出自定義的信息窗體
    var mapObj = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 15,
            zooms:[4,18]//設置地圖級別範圍
        });
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = 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
            GeoLocationFirst:false,   //默認爲false，設置爲true的時候能夠調整PC端爲優先使用瀏覽器定位，失敗後使用IP定位
            panToLocation: true,     //定位成功後將定位到的位置做爲地圖中心點，默認：true
            zoomToAccuracy:false,      //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false

        });
        mapObj.addControl(geolocation);
        geolocation.getCurrentPosition(function (res, result) {
            if(res == 'complete'){
                $.ajax({
                    url: "{:url('map/red_accord_index')}",
                    type: 'post',
                    data: {
                        lon:result.position.P,
                        lat:result.position.O,
                        district:result.addressComponent.district,
                        city:result.addressComponent.city,
                        province:result.addressComponent.province
                    },
                    success: function (data) {
                        var red = data.data;
                        var num = red.length;
                        var markerList = [];
                        var positions = [];

                        if(num>0){
                            for (var i = 0;i < num; i++){
                                positions.push([red[i].lon, red[i].lat]);
                                var marker = new AMap.Marker({
                                    map:mapObj,
                                    icon:"http://nideyuming.com/picture.png",
                                    position: positions[i]
                                });
                                markerList.push(marker);
                                marker.content = red[i].red_id;
                                marker.on('click', markerClick);
                            }

                            function markerClick(e) {
                            window.location.href='/path/map/map_details/red_id/'+e.target.content;
                            }
                            mapObj.add(markerList);
                        }
                    },
                    error:function(res){
                        alert(JSON.stringify(res))
                    }
                });
            }
        });
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯信息
    });

</script>

<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</html>
PHP代碼不在此處顯示，主要是用於篩選符合條件的紅包。若有須要請留言。javascript