<!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代码不在此处显示，主要是用于筛选符合条件的红包。如有需要请留言。