根据经纬度、方位角渲染位置点图标(黄色图标为车辆在线、灰色图标为车辆离线) ;点击车辆具体图标可查看速度、海拔、平均油耗、定位时间以及定位地点(调用阿里云逆地理编码接口,将经纬度转换为详细结构化的地址)

map = new google.maps.Map(document.getElementById('map'), {// zoom 属性指定了地图的 缩放级数zoom: 4,// 起始位置center: new google.maps.LatLng(34.31229993, 108.76148126),// 免摁Ctrl键缩放gestureHandling: 'greedy',// 地图的初始化类型mapTypeId: google.maps.MapTypeId.HYBRID,// 比例尺scaleControl: true});$.each(JSON.parse(results.msg), function (index, row) {// 车辆iconvar iconk = "info" + index;// 判断车辆状态(0在线 1离线)if (row.status == 0) {// 记录在线车辆总数onlineVehicle += 1;// 在线车辆iconlist[iconk] = {name: iconk, icon: iconBaseOnline + row.angle + ".png"};} else {// 离线车辆iconlist[iconk] = {name: iconk, icon: iconBaseOffline + row.angle + ".png"};}// 车辆位置坐标点、图标、海拔、车架号printList.push({lat: row.y, lng: row.x, type: $.trim(iconk), elevation: row.hb, tboxVin: row.uid});});// 渲染位置点、图标var markers = printList.map(function (location, i) {var clickMarker = new google.maps.Marker({position: location,icon: iconlist[location.type].icon});clickMarker.addListener('click', function () {infowindow.open(map, clickMarker);});return clickMarker;});var markerCluster = new MarkerClusterer(map, markers,{imagePath: '../img/m'});});

Google Maps谷歌地图车辆位置描点、位置详情查看相关推荐

  1. 在谷歌地图上显示您的位置

    HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置 定位用户的位置 www.binblog.cn HTML5 Geolocation API 用于 ...

  2. 在bigemap中添加Google map(谷歌地图)

    BIGEMAP如何添加在线google map 谷歌地图 最近一直在研究如何在bigemap手机端和Gis office桌面上添加谷歌地图,经过调试,亲测有效. 谷歌卫星地图(无偏移): https: ...

  3. Google Maps API –地图类型示例

    Google Maps API支持四种地图类型: ROADMAP –显示普通的街道/道路地图(默认地图类型). 地形-根据地形信息显示正常的街道/道路地图. 卫星–仅显示卫星图像. 混合–普通和卫星视 ...

  4. Delphi快速开发本机跨平台Google Maps谷歌地理信息系统GIS解决方案

    如果您想在FMX和VCL应用程序中具有地图功能,则应通过TMSSoftware检出高级WebGMaps组件. WebGMaps具有什么功能? 通过设置WebGMaps组件,您可以轻松地在FMX或VCL ...

  5. google map谷歌地图瓦片地址无偏移矢量地图电子地图影像地图

    前几天做谷歌地图踩大坑,目前网上很多文字的瓦片地址是可以访问但,矢量地图有偏移,你将矢量地图和影像地图同时加载出来就会发现两个地图不能完全的重合,而且连标注都没有和地图重合.那是因为矢量地图做了偏移影 ...

  6. 记录:google map谷歌地图自定义叠加层overlay流程

    Google Map自定义叠加层的实现 1.触发: // 返回结果的数组,拿到有效的值存进数组 let newArr = res.filter((item) => {return item.li ...

  7. Google Map 谷歌地图

    <script> var map;function initMap() { var position = new google.maps.LatLng(1.539187, 103.6471 ...

  8. 免费下载谷歌maps软件_Android Google Maps当前位置,夜间模式功能

    免费下载谷歌maps软件 In this tutorial, we'll play around with the Android Google Maps API. Showing the user ...

  9. 谷歌地图离线地图瓦片下载_如何下载Google地图以供离线使用

    谷歌地图离线地图瓦片下载 If you've ever wanted to be able to download Google Maps data for offline use, you shou ...

最新文章

  1. Angular Http
  2. bzoj:1221;vijos 1552 软件开发
  3. 接口测试,接口协议以及常用接口测试工具介绍
  4. Mysql报错Fatal error:Can't open and lock privilege tables
  5. leetcode518. 零钱兑换 II
  6. 日照职业技术学院计算机怎么样,日照职业技术学院宿舍条件怎么样 住宿环境好不好...
  7. 建信01. 间隔删除链表结点
  8. ECharts学习(1)--简单图表的绘制
  9. c语言字母表等腰三角,【原创】CS必修课——C语言基础编程实战26“C语言输出等腰三角形”...
  10. linux多线程学习(七)——实现“生产者和消费者”
  11. Android系统(45)--Monkey 测试相关知识
  12. 学习Windows Mobile开发系列笔记(win32基本程序框架)
  13. 游戏设计要素探秘之术语的呼唤
  14. Centos5.8升级SSH到5.8p2
  15. Atitit 图像处理知识点  知识体系 知识图谱
  16. 伪原创视频软件 视频MD5怎么更改
  17. GTX 1050ti和GTX960哪个好
  18. 物联网的涵义、架构、技术和产业概述
  19. 中国古代哲学书籍目录
  20. 系统开发和安全性分析

热门文章

  1. 给自己的学习任务1:做一个工资计算器app
  2. (寒假开黑gym)2018 ACM-ICPC, Syrian Collegiate Programming Contest
  3. 如何用大数据和开放平台创新
  4. 用python爬取考研词汇及其近反义词与例句
  5. Linux快速入门之 静态库和动态库 (07)
  6. word页脚显示不全
  7. 高效发表科技论文的写作方法与技巧
  8. AAM Alignment最后一篇:Robust AAM Alignment with Occlusion
  9. Java 8 list 对象字段升序降序
  10. layui表格点击按钮下方新增加空白行