远控开发记录04_显示手机位置

原创 2016年08月29日 16:38:22

既然前面已经将手机的位置信息写入了数据库。那么我们需要在web端进行显示。先看效果。

这里写图片描述

这是笔者开发的远控系统的主页。用户登录之后可见,因为比较匆忙。比没有对界面ui做过多的要求。可以看到右方的有一个地图点击“我的手机位置”之后用来显示手机的位置。那么同样使用到高德地图api。
配置过程可以参考高德地图的官方文档 http://lbs.amap.com/api/javascript-api/summary/

笔者使用thinkphp开发前端。即在前面提到的mvc框架中的view视图中新建一个html。下面是一段JavaScript的代码。用来显示地图。、

首先是定义一个放置地图的区域。id是container。

</div>
    <div style="width:45%; height:500px;margin-left: 50%;margin-top: 3.5%;" id="container">
    </div>

接下来对这片区域进行渲染。这只是对地图的初始化

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.39, 39.9],
        zoom: 17
    });
    var marker = new AMap.Marker({
        position: map.getCenter()
    });
    marker.setMap(map);
    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle('手机的位置');


    var markerContent = document.createElement("div");
    // 点标记中的图标
    var markerImg = document.createElement("img");
    markerImg.className = "markerlnglat";
    markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
    markerContent.appendChild(markerImg);
    var markerSpan = document.createElement("span");
    markerSpan.className = 'marker';

    map.plugin(['AMap.ToolBar'], function () {
        toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    })

接下来是“我的手机位置”这个按钮的点击事件响应函数

 $.post("/home/index/getxy",
                function (data, status) {
                    if (status) {
                        data = $.parseJSON(data);
                        px = parseFloat(data.x);
                        py = parseFloat(data.y);
                        pos = data.position;
                        map.setCenter([px, py]);
                        marker.setPosition([px, py]);
                        // 点标记中的文本
                        markerSpan.innerHTML = pos;
                        markerContent.appendChild(markerSpan);
                        marker.setContent(markerContent); //更新点标记内容
                    }
                });

这里要提到的是$.post方法是基于jquery框架的。
具体的配置可以参考官方的文档 :https://api.jquery.com/
中文的网址是这个:http://www.jquery123.com/
代码中的”/home/index/getxy”也就是我们上次提到的网址。在控制器中编写的处理函数。而function (data, status)是处理结果的监听函数。对结果进行处理。有不明白的地方均可以在其他地方找到答案。也欢迎留言笔者尽力给各位解答。

我是搬运工,热爱我的热爱

版权声明:本文为博主原创文章,未经博主允许不得转载。

NN远程控制软件,安卓源码二次开发

NN远程控制软件组件SDK安卓版二次开发源码,提供NNHelp远程控制功能,支持开源代码中包含以下技术或用法: 1、 自定义位图的显示类,放大缩小,拖动图片,全屏显示。 2、 自定义菜单的显示与操作。...
  • Ensue
  • Ensue
  • 2016年11月29日 12:48
  • 2324

从零开始做远控 完满结束 发布完整源代码及已编译好的程序

这一节发布"Zero远控"完整源代码,以及"Zero远控1.0"发布版。 经过了一个礼拜的工作,我们的Zero远控终于完成了,麻雀虽小,但功能齐全,完美实现了:“屏幕监控,键盘监控,文件监控,Cmd命...
  • sumkee911
  • sumkee911
  • 2016年12月26日 15:43
  • 4568

远控开发记录02_手机定位

手机丢失后,需要知道手机所在的位置,那么手机定位是远控系统必要的功能。 笔者使用高德地图api来实现手机定位。当然也可以不使用。 那么使用高德地图api首先进入http://lbs.amap.co...
  • u014472643
  • u014472643
  • 2016年08月29日 13:51
  • 208

当心,安卓远控(spynote)升级了……

Win764位企业版; jdk1.8 64位; .net 4.5 64位;亲测稳定 *原创作者:永生,本文属Freebuf原创奖励计划,未经许可禁止转载 最近在...
  • qq_27446553
  • qq_27446553
  • 2017年04月29日 00:05
  • 1230

远控开发记录03_Http

上一篇笔者讲到要将手机的位置信息发送到服务器并存入数据库。那么现在开始使用AsyncHttpClient来发送消息。 首先可以Google一下AsyncHttpClient包的下载地址,这是开源的。...
  • u014472643
  • u014472643
  • 2016年08月29日 14:57
  • 176

从零开始做远控 簡介篇 做一个属于你自己的远控

做一个属于你自己的远控: 先向你们简单讲解下什么叫远程控制,就是在别人不知情的情况下控制别人的电脑,也就是间谍软件木马。远程控制里有服务端和客户端,客户端是你偷偷放到被控制人的电脑的间谍程序,他负责接...
  • sumkee911
  • sumkee911
  • 2016年12月17日 17:48
  • 3333

大量远控源码

大量远控源码   转自 http://yuan71058.blog.163.com/blog/static/3395950820131213625704/ http://115.co...
  • skykingf
  • skykingf
  • 2013年10月10日 10:42
  • 8827

从零开始做远控 第三篇

搭建客户端: 本来想用VC开发客户端的的,但为了不混乱,我们还是选了Qt,但我们不会用Qt库(因为Qt库当你完成了你的远控后你要绑定一大堆库才能在客户的电脑上开启),只会用到Win32 API。 我...
  • sumkee911
  • sumkee911
  • 2016年12月20日 16:59
  • 1076

关于一款远控木马的简单分析

其实很多朋友都不明白木马是如何简简单单的窃取了你的帐号密码乃至你的网银帐号,趁其你使用网银U盾还没有拔下来,直接操纵你的计算机进行转账,或者更高级的在你转账之时修改网页内容,甚至在你不知不觉中开启你计...
  • followingturing
  • followingturing
  • 2012年08月24日 17:23
  • 3945

自己前几天用MASM写的一个远控

 最先是在看雪发的  新开空间我也没啥东西 只能拿这个凑数了 ;作者:落笔飞花笑百生 ;日期:2014/12/20 ;用处:练手 ;写一个程序虽然很烂但是确实能学到很多,用汇编写程序能逼...
  • qq_18942885
  • qq_18942885
  • 2015年04月27日 16:11
  • 754
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:远控开发记录04_显示手机位置
举报原因:
原因补充:

(最多只允许输入30个字)