天地图学习·a

天地图：{

地图安装插件：

npm install vue-tianditu

and

yarn add vue-tianditu

main文件配置（

import VueTianditu from 'vue-tianditu'

Vue.use(VueTianditu, { v: '4.0',

tk: 'd17e8d73eb49a54b72c039ff6a868956',

plugins: ['CarTrack']`

})

)

页面文件：构建页面

（

使用天地图标签：

"地图标签标点、汽车轨迹等"

"这个标签是车辆"

"这个标签是天地图自带的地点搜索栏"

"这个标签是地图工具"

"这个标签是工具的圆形工具"

"这个标签是工具的标点工具"

"这个标签是线路标签"

"除搜索栏外，上述标签在天地图上的操作是由经纬度控制的数据驱动的。标点标点符号、线路、画圆、车辆等的经纬度变量必须是唯一的变量"

除天地图外div等等使用：

除天地图固定标签外，按钮弹框等只能在标签外使用，需要控制z-index图层

否则，它将被地图和位置覆盖div所需要进行position: absolute控制位置

）

}

实现标点获取经纬度，保存后台存储线路，获取历史记录标点恢复历史线路

拿到经纬度，移动车辆轨迹路线

在webSocket当连接成功时

实时车行路线，使用setInterval 实时获取数据线描述，记录数据

具体操作根据返回的数据转换为我们可以使用的数据数组包数组 PathList:[

[123，123]，[123，124]

]

后台获得报警经纬度，报警点报警，

// 6/9

export default {   //   name: "ex-map",   //   name: "ex-marker",   //   name: "ex-cartrack",   data() {     return {       center: [113.280637, 23.125178],       zoom: 11,       edit: false,       pointList: [[113.280637, 23.125178]],       path: [[113.280637, 23.125178]],       tracks: [],       CarList: [         [113.280637, 23.125178],         [113.280637, 23.125178],       ],       //   carstyle: { display: true,  width: 52, height: 26 },     };   },   methods: {     mapClick(e) {       console.log(e.lnglat);       this.pointList.push([e.lnglat.lng, e.lnglat.lat]);       this.path.push([e.lnglat.lng, e.lnglat.lat]);       this.CarList.push([e.lnglat.lng, e.lnglat.lat]);       console.log(this.pointList);     },     Click() {       console.log(this.marker1);     },   }, }; 

以前学的不完善，现在来完善一下；

通过map点击事件获得经纬度push到数组for循环获取我们想要的数据进行赋值。实现连续标点连续画线