远控开发记录04_显示手机位置
来源:互联网 发布:mac下面的图标怎么改 编辑:程序博客网 时间:2024/05/19 00:14
既然前面已经将手机的位置信息写入了数据库。那么我们需要在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)是处理结果的监听函数。对结果进行处理。有不明白的地方均可以在其他地方找到答案。也欢迎留言笔者尽力给各位解答。
我是搬运工,热爱我的热爱
0 0
- 远控开发记录04_显示手机位置
- 远控开发记录02_手机定位
- 远控开发记录00_序
- <手机控>开发过程记录
- 《手机控》开发过程记录
- 远控开发记录01_环境搭建
- 远控开发记录05_文件目录
- 远控开发记录06_远程备份
- 远控开发记录07_自定义listview
- frame 显示的位置错误的记录
- 记录几个手机开发网站
- Android开发_精准排布控件位置
- android开发之记录ListView滚动位置
- Unity3D手机斗地主游戏开发实战(03)_地主牌显示和出牌逻辑(不定期更新中~~~)
- java 开发 页面部分位置显示乱码
- android开发 dialog显示在任意位置
- sql排序后指定记录显示在指定位置
- 469_三星手机path太长显示不出
- SQL复习
- 一次完整的HTTP请求
- 计算机USB系统原理及其主从机设计.pdf
- Docker:删除images报错(Error response from daemon: conflict: unable to remove repository reference)
- 从稀疏表示到压缩感知(下)
- 远控开发记录04_显示手机位置
- ArcGIS Runtime SDK for WPF 10.2.5下载
- http请求过程分析
- 日历开发demo
- day11_python多线程之event代码
- JVM架构(008)_java垃圾回收机制是什么
- Android Studio NDK开发(一)
- python 环境下gensim中的word2vec的使用笔记
- (六)2.4 Mysql Hash索引和B-tree索引区别