高德地图定时刷新车辆位置

在public文件夹的index.html文件引入高德地图

data() {

return {

zoomSize: 4,

setCenter:[110.387223, 34.673928],

map: null,

infoWindow: null,

isOpenInfo: false,

screenWidth: window.screen.width,

}

},

mounted() {

this.initMap()

},

beforeDestroy() {

if (this.map) this.map.destroy()

},

methods: {// 初始化地图initMap() {this.map = new AMap.Map(this.id, {center: this.setCenter,zoom: this.zoomSize,resizeEnable: true,mapStyle: 'amap://styles/0eaad232f61a2341504ad172e308f464',})this.map.on('click', () => {this.reSetMap()})this.map.on('zoomend', () => {this.refresh()})this.map.on('complete', () => {this.$emit('checkId') //检查页面是否路由传参获取车辆详情// 初始化信息窗体this.infoWindow = new AMap.InfoWindow({anchor: 'center-center',// isCustom: true,isCustom: true,offset: new AMap.Pixel(0, -10),})})},// 地图车辆标注setCarMarker(v) {// console.log(v)let marker = new AMap.Marker({map: this.map,position: new AMap.LngLat(v.lng, v.lat),// bubble: true,icon: new AMap.Icon({// 图标尺寸size:  new AMap.Size(32, 32),// 设置点标记中显示的图标image: v.vehicleStatus === '1' ? outIcon : inIcon,// 图标所用图片大小imageSize: new AMap.Size(32, 32),// 图标取图偏移量imageOffset: new AMap.Pixel(0, 0),}),offset: new AMap.Pixel(-16, -13),extData: v,topWhenClick: true, // 鼠标点击时marker是否置顶})marker.name = 'carMarker' + v.vehicleId// 设置鼠标划过点标记显示的文字提示marker.setTitle(v.plate)return marker},// 更新车辆数据updateCar(data) {// console.log(data)// 30s刷新的时候，分3种情况判断// 1、地图上有的车，获取到新数据里面也有的车，要更新地图上的车；// 2、地图上有的车，获取到新数据里面没有的车，要删除地图上的车；// 3、获取到的新数据里面有的车，地图上的没有的车，要添加这些车到地图上。let allOverlays = this.map.getAllOverlays()// 覆盖物车和新数据车对比，含有的车辆直接更新数据data.map((v) => {// 覆盖物里面有，新数据里面有的车，要更新allOverlays.map((item) => {if (item.name) {if (item.name.indexOf('carMarker') != -1) {let idd = item.name.replace(/[^0-9]/gi, '')if (v.vehicleId == idd) {this.updateCarInfo(item, v)}}}})})// 覆盖物里面有，新数据里面没有的车，要删除let oldcarArr = allOverlays.filter((item) => {if (item.name) {if (item.name.indexOf('carMarker') != -1) {let idd = item.name.replace(/[^0-9]/gi, '')return !data.some((ele) => ele.vehicleId == idd)}}})if (oldcarArr.length > 0) {oldcarArr.map((o) => {o.setMap(null)})}// 新数据里面有的车，覆盖物里面没有，要添加let newcarArr = this.compareArr(data, allOverlays)if (newcarArr.length > 0) {// 所有车newcarArr.map((cc) => {this.getCarMarker([cc])})}},// 30s更新地图已有车辆位置、方向和图标信息updateCarInfo(item, v) {item.setPosition(new AMap.LngLat(v.lng, v.lat))// 在更新标注位置的时候，同时更新其他信息extData，防止点击其他车辆的时候标签位置还是原来车辆的位置（因为车位置会变）item.setExtData(v)item.setIcon(new AMap.Icon({size:  new AMap.Size(32, 32),image: v.vehicleStatus === '1' ? outIcon : inIcon,imageSize: new AMap.Size(32, 32),}))},// 取出不同data里面有，allOverlays里面没有,要添加compareArr(data, allOverlays) {var result = []for (var i = 0; i < data.length; i++) {var obj = data[i]var num = obj.vehicleIdvar flag = falsefor (var j = 0; j < allOverlays.length; j++) {if (allOverlays[j].name) {// 首页的所有车，或者，点击一辆车之后的其他车if (allOverlays[j].name.indexOf('carMarker') != -1) {let idd = allOverlays[j].name.replace(/[^0-9]/gi, '')var n = iddif (n == num) {flag = truebreak}}}}if (!flag) {result.push(obj)}}// console.log(result)return result}

高德地图定时刷新车辆位置相关推荐

android定位附近店铺,高德地图怎么添加店铺位置_高德地图定位怎么设置添加自己家店铺位置_攻略...
高德地图是国内最知名的地图导航软件,基本上每个人的手机上都有这款软件.如今想要方便出行都可以通过高得地图查询位置就可以了,给我们的生活带来了很多的便利.在高德地图上也可以很方便的查询各个地方的店铺,通 ...
java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
高德地图根据点标记位置自动调整地图缩放级别
项目场景: 高德地图根据点标记位置自动改变地图缩放解决方案: 主要是map.setFitView()方法, 官方代码如下: 自适应显示多个点标记-点标记-示例中心-JS API 2.0 示例 | 高 ...
基于高德地图实现融云位置共享功能
基于高德地图实现融云位置共享功能(Android篇) 效果预览: 开发准备: 1: 登录融云开发者账号,提交 server 平台工单申请开通实时位置共享功能.工单回复开通成功后. 2 小时生效. ...
高德地图左上角或任意位置增加自定义按钮，一刷新按钮消失问题
在高德地图上增加按钮,通过点击按钮进行某些操作. 其实是非常简单的,但是网上没有搜到类似的文章,所以在写这个功能的时候,出现一刷新才会显示按钮,然后按钮消失不见. 这是因为自定义的按钮层级不够,被高德 ...
跟我学在高德地图——标注我的位置
这里使用的SDK为AMap_Location_V2.5.0_20160526.jar 没有接触过高德地图的同学,请参考加载一张高德地图 1.获取我的位置 package com.pansoft.oi ...
高德地图定位拖动改变位置
现在关于地图使用越来越多,相信大家可能都或多或少的用到过,本篇文章简单总结了一下关于高德地图定位且可以拖动改变位置的功能的实现. 首先按照高德开发文档,导入jar包,申请key,可以在高德地图的开放平 ...
高德地图API获取当前位置对应的周边信息
一.前言当前公司开发计划做一个打卡功能,获取用户信息地理信息后,提供列表给客户选择打卡地点(200米范围内).自己今天对三家地图开放者平台文档进行了查看比较(腾讯.百度.高德),目前实现的方法采用的 ...
h5手机端或PC端利用高德地图获取当前定位位置
踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...

高德地图定时刷新车辆位置

高德地图定时刷新车辆位置相关推荐

最新文章

热门文章