效果如图
使用了高德地图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以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,抓取,共享单车,位置
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例”评论...