DDR爱好者之家 Design By 杰米
效果如图
使用了高德地图API:https://lbs.amap.com/api/javascript-api/example/marker/massmarks
js代码如下:
function MapOperate() { } MapOperate.prototype.listensubmit = function () { var self = this; var submitBut = $(".submit-btn"); var time_id = $("#time-id"); var time_now = new Date(time_id.html()); submitBut.click(function () { var btn = $(this); var data_id = btn.attr('data-id'); var datas = self.format(time_now, "yyyy-MM-dd HH:mm"); switch (data_id) { case data_id = "a": console.log("a"); time_now = new Date(time_id.html()); var t = time_now.getTime(); t -= 1900000; datas = new Date(t); datas = self.format(datas, "yyyy-MM-dd HH:mm"); break; case data_id = "b": console.log("b"); time_now = new Date(time_id.html()); var t = time_now.getTime(); t -= 120000; datas = new Date(t); datas = self.format(datas, "yyyy-MM-dd HH:mm"); break; case data_id = "c": console.log("c"); datas = "2019-05-05 12:01"; break; case data_id = "d": console.log("d"); time_now = new Date(time_id.html()); var t = time_now.getTime(); t += 120000; datas = new Date(t); datas = self.format(datas, "yyyy-MM-dd HH:mm"); break; case data_id = "e": console.log("e"); time_now = new Date(time_id.html()); var t = time_now.getTime(); t += 1900000; datas = new Date(t); datas = self.format(datas, "yyyy-MM-dd HH:mm"); break; } console.log(datas); var div = document.getElementById("time-id"); div.innerText = datas; $.ajax({ type: 'post', async: false, url: '/index', data: { "datas": datas, }, success: function (result) { //stringify()用于从一个对象解析出字符串 // jsonData = JSON.stringify(result['result']); // console.log(jsonData); //JSON.parse用于从一个字符串中解析出json对象 var map = new AMap.Map('container', { zoom:15, center: [119.03797, 33.548503] }); var jsondata = JSON.stringify(result['result']); var dt = JSON.parse(jsondata); if (dt.length > 0) { var style = [{ url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', anchor: new AMap.Pixel(6, 6), size: new AMap.Size(8, 8) }, { url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', anchor: new AMap.Pixel(3, 3), size: new AMap.Size(8, 8) }, { url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', anchor: new AMap.Pixel(4, 4), size: new AMap.Size(8, 8) } ]; var massMarks = []; for (var i = 0; i < dt.length; i++) { var point = {'lnglat': [dt[i][0], dt[i][1]], 'name': "1", 'id': i}; massMarks.push(point); } var mass = new AMap.MassMarks(massMarks, { opacity: 0.8, zIndex: 111, cursor: 'pointer', style: style }); var marker = new AMap.Marker({content: ' ', map: map}); mass.on('mouseover', function (e) { marker.setPosition(e.data.lnglat); marker.setLabel({content: e.data.name}) }); mass.setMap(map); } } }); }); }; MapOperate.prototype.run = function () { var self = this; self.listensubmit(); }; MapOperate.prototype.tool = function (ResultList) { // 创建地图实例 var map = new AMap.Map("container", { zoom: 13, center: [119.038, 33.548], resizeEnable: true, mapStyle: 'amap://styles/whitesmoke' }); var positions = ResultList; var anchor = [ 'bottom-left', 'bottom-center', 'bottom-right', 'middle-left', 'center', 'middle-right', 'top-left', 'top-center', 'top-right' ]; var pos_icon = []; var pos_marker = []; var icon = []; var marker = []; for (var i = 0; i < 100; i++) { // 创建一个 Icon pos_icon[i] = new AMap.Icon({ // 图标尺寸 size: new AMap.Size(12, 12), // 图标的取图地址 image: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker.png', // 图标所用图片大小 imageSize: new AMap.Size(12, 12), }); // 将 Icon 传入 marker pos_marker[i] = new AMap.Marker({ position: positions[i], icon: pos_icon[i], anchor: 'center', //设置锚点 offset: new AMap.Pixel(0, 0) //设置偏移量 }); map.add(pos_marker[i]); } }; $(function () { var map = new MapOperate(); map.run(); }); MapOperate.prototype.format = function (now, mask) { var d = now; var zeroize = function (value, length) { if (!length) length = 2; value = String(value); for (var i = 0, zeros = ''; i < (length - value.length); i++) { zeros += '0'; } return zeros + value; }; return mask.replace(/"[^"]*"|'[^']*'|\b("_blank" href="https://github.com/longbigbeard/Hellobike_webShow" rel="external nofollow" >https://github.com/longbigbeard/Hellobike_webShow以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]