基于高德地图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="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,//是否使用高精度定位，默认: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:"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代码不在此处显示，主要是用于筛选符合条件的红包。如有需要请留言。

转载于:https://my.oschina.net/u/3214063/blog/2050367

基于高德地图JSAPI 开发移动端地图红包相关推荐

地图的开发研究---在线地图
关于地图的开发,目前有两种,谷歌或者百度地图提供的在线API(目前我使用的),方便有效,但是需要用户可以连接到百度或者谷歌的服务器,即必须在线,对于重视安全隐私的局域网不适合.另一种就是开源组件使用的 ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
java 地图控件_控件交互-与地图交互-开发指南-Android 地图SDK | 高德地图API
控件是指浮在地图图面上的一系列用于操作地图的组件,例如缩放按钮.指南针.定位按钮.比例尺等. UiSettings 类用于操控这些控件,以定制自己想要的视图效果.UiSettings 类对象的实例化需 ...
矢量地图包——让移动端地图飞起来
众所周知,由于移动设备自身的限制,对移动端地图数据的要求一般比桌面端更高,而矢量地图包性能高.显示好.体积小.更新快.易传输等特点,恰恰满足了移动端的需求.正因如此,二者成为完美搭档,擦出了美妙的火花 ...
高德地图jsapi开发-定位失败
在开发一个项目的时候,涉及到地图,开发过程中,电脑是连接的wifi:发现项目测试,电脑显示定位失败,因为用电脑的话测试方便调整,手机正常:实时修改会麻烦一点:在这个过程中找了很久都没发现具体问题,怀疑 ...
高德地图JS-API开发—测距
// 测距算法 function distance(pointX, pointY) { // 获取定位坐标data.position / ...
（转载）基于LBS地图的开发，满足地图上有头像的需求
最近做的项目主要是LBS这块主打成员定位功能我们的UI设计是这样的乍一看上去是挺好挺美观的不同的人会显示不同的头像可是当人扎堆的时候问题就来了当人多的时候(例如上图所示) 地图滑动起来就 ...
android高德地图截屏,地图截屏功能-与地图交互-开发指南-Android 地图SDK | 高德地图API...
/** * 对地图进行截屏 */ aMap.getMapScreenShot(new OnMapScreenShotListener() { @Override public void onMapSc ...
ios 点生成线路百度地图_iOS开发-集成百度地图（OC语言）
一.申请安全码图1-1 申请安全码二.导入SDK,添加依赖库 1.根据项目需求(定位?路径规划?)下载所需要的SDK包,传送门:下载百度地图SDK,并拖进项目中. 图2-1 导入SDK 2.添加依 ...

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

基于高德地图JSAPI 开发移动端地图红包相关推荐

最新文章

热门文章