1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 基于高德地图JSAPI 开发移动端地图红包

基于高德地图JSAPI 开发移动端地图红包

时间:2019-10-14 13:30:02

相关推荐

基于高德地图JSAPI 开发移动端地图红包

<!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="/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,//是否使用高精度定位,默认:truetimeout: 10000,//超过10秒后停止定位,默认:无穷大maximumAge:0, //定位结果缓存0毫秒,默认:0convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:trueshowButton: true, //显示定位按钮,默认:truebuttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记,默认:trueshowCircle: true, //定位成功后用圆圈表示定位精度范围,默认:trueGeoLocationFirst:false, //默认为false,设置为true的时候可以调整PC端为优先使用浏览器定位,失败后使用IP定位panToLocation: true,//定位成功后将定位到的位置作为地图中心点,默认:truezoomToAccuracy: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:"/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="/demos/js/liteToolbar.js"></script></html>

PHP代码不在此处显示,主要是用于筛选符合条件的红包。如有需要请留言。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。