【第22期】观点:IT 行业加班,到底有没有价值?

远控开发记录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)是处理结果的监听函数。对结果进行处理。有不明白的地方均可以在其他地方找到答案。也欢迎留言笔者尽力给各位解答。

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

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

相关文章推荐

你想跨互联网远程调试Android设备吗,推荐一个远程控制手机的免费软件

以前,常常碰到这样的烦恼问题:我们开发的App应用,明明自己测试好好的,部署到用户的安卓设备上之后,总是遇到种种奇怪而又不好找到原因的问题。虽然说Android系统硬件差异大,各个厂商的设备系统实现细...

如何玩转Android远控(androrat)

http://lcx.cc/?i=3882 关于WebView中接口隐患与手机挂马利用的引深 看我是怎样改造Android远程控制工具AndroRat 1.修改布局界...

远程控制桌面,手机外网远程桌面连接内网的实现过程,详细图文并茂

主旨: 主机在公司内网环境,但有时在家里或在外网环境时,通过手机端的远程控制管理公司内网主机,实现远程办公管理。 产生背景: 手机随身带,平时又要管理关注下公司内服务器,故而有这样的需求...
  • tordoo
  • tordoo
  • 2015-12-03 09:58
  • 2908

手机实现远程桌面控制

准备工作及个人体验关于具体如何开放远程桌面我这里就不详细解释了,外面有很多教程。首先你要有一台可以被远程控制的电脑或者服务器。这个APP的功能和PC版的相比应该说是比较完善的,基本上PC端能做的,它都...

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

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

程序员的思维修炼:开发认知潜能的九堂课

如喜欢本书,请购买正版。
  • tiewen
  • tiewen
  • 2014-06-19 16:43
  • 11068

微信公众账号开发

微信开发 <div class="entrylistPosttitle" style="margin

微信公众账号开发

微信开发 微信公众平台开发(82) 天气预报 摘要: 在这篇教程中,我们将介绍如何在微信公众平台上开发天气预报功能。我们将使用中国天气网的气象数据接口来获取天气信息。这篇教...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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