vue2中引入天地图及相关配置

前言

项目中需要引入特殊用途的地图，发现天地图比高德地图、百度地图要更符合需求，于是看了看天地图。

正文

vue2项目中如何引入天地图并对相关的配置进行修改使用呢？官方给的4.0版本的使用说明。

1. 引入：

进入到public/index.html中：

2. template代码：

3. javascript全部代码

地图标记点的数据格式如下

_this.plantDataList = [
          {
          longitude: "81.120445",
          latitude: "43.922741",
          plantStatus: "0", //0正常 1离线 2异常
          prjName: "一号牧场", //项目名称
          prjId: 1, //站点id
          plantStatus: 0,
          square: 2000, //面积
          prjaddress: "新疆维吾尔自治区伊犁哈萨克自治州伊宁市1号地",
          pump: 2, //传感器
          valve: 2, //阀门数量
        }
]

js代码如下

其中，关于地图中的事件中，基本名称都是js原生的名字，然后通过 addEventListener()监听事件，比如mouseover（鼠标移入）、mouseout(鼠标移出)、click(单击)、dblclick(双击)

4. less代码

效果

1.可以通过接口获取不同状态地图标记点，分别用蓝、黄、红图标表示正常、离线、异常等状态

2.为所有的标记点添加信息浮窗