基于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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
详解JavaScript对象类型
Jun 16 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
使用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
php adodb分页实现代码
2009/03/19 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jQuery之排序组件的深入解析
2013/06/19 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python的缺点和劣势分析
2019/11/19 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
医药专业推荐信
2013/11/15 职场文书
党员干部承诺书范文
2014/03/25 职场文书
保护水资源的标语
2014/06/17 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers