基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例


Posted in Javascript onAugust 27, 2019

效果如图

基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

使用了高德地图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(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) {
    switch ($0) {
      case 'd':
        return d.getDate();
      case 'dd':
        return zeroize(d.getDate());
      case 'ddd':
        return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
      case 'dddd':
        return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
      case 'M':
        return d.getMonth() + 1;
      case 'MM':
        return zeroize(d.getMonth() + 1);
      case 'MMM':
        return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
      case 'MMMM':
        return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
      case 'yy':
        return String(d.getFullYear()).substr(2);
      case 'yyyy':
        return d.getFullYear();
      case 'h':
        return d.getHours() % 12 || 12;
      case 'hh':
        return zeroize(d.getHours() % 12 || 12);
      case 'H':
        return d.getHours();
      case 'HH':
        return zeroize(d.getHours());
      case 'm':
        return d.getMinutes();
      case 'mm':
        return zeroize(d.getMinutes());
      case 's':
        return d.getSeconds();
      case 'ss':
        return zeroize(d.getSeconds());
      case 'l':
        return zeroize(d.getMilliseconds(), 3);
      case 'L':
        var m = d.getMilliseconds();
        if (m > 99) m = Math.round(m / 10);
        return zeroize(m);
      case 'tt':
        return d.getHours() < 12 ? 'am' : 'pm';
      case 'TT':
        return d.getHours() < 12 ? 'AM' : 'PM';
      case 'Z':
        return d.toUTCString().match(/[A-Z]+$/);
      // Return quoted strings with the surrounding quotes removed
      default:
        return $0.substr(1, $0.length - 2);
    }
  });
 
}

项目地址:https://github.com/longbigbeard/Hellobike_webShow

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
Vue实现简易计算器
Feb 25 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 #Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 #Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 #Javascript
javascript实现抢购倒计时程序
Aug 26 #Javascript
VUE路由动态加载实例代码讲解
Aug 26 #Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
Laravel 队列使用的实现
2019/01/08 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python非递归全排列实现方法
2017/04/10 Python
浅谈django orm 优化
2018/08/18 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python脚本和网页有何区别
2020/07/02 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
公开服务承诺制度
2014/03/26 职场文书
双创工作实施方案
2014/03/26 职场文书
争做文明公民倡议书
2014/08/29 职场文书
撤诉书怎么写
2015/05/19 职场文书
小学班主任工作随笔
2015/08/15 职场文书
教师教育教学随笔
2015/08/15 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Python的property属性详细讲解
2022/04/11 Python