注册腾讯位置服务账号

入门指南

vue引入js

项目根目录下的index.html里引入

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourKey"></script>

创建map.vue

<template>
  <el-row>
    <div class="select-project">
      <el-input v-model="deviceName" placeholder="请输入设备名" style="width:250px" maxlength="30"></el-input>
      <el-button icon="el-icon-search" @click="search()">查找</el-button>
      <el-button style="float:right" size="small" type="primary" @click="toPath()">设备信息</el-button>
    </div>
    
    <div id="deviceMap" style="width:100%;height:700px;"><div class='numabs'>&nbsp;总设备数({{deviceData.length}})&nbsp;</div></div>
  </el-row>

</template>

<script>
export default {
  name: "deviceMap",
  data() {
    return {
      deviceName:'',
      searchData:[],
      address: "",
      deviceData: [],
      markerArrays: []
    };
  },
  methods: {
    toPath() {
        this.$router.push("/equipment_main");
    },
    search() {
      this.$api.device
        .DeviceInfoList({ pageQuery: false, deviceName: this.deviceName })
        .then(res => {
          this.searchData = res.records;
          this.init();
        });
    },
    // 清除标记
    clearMarkers() {
      this.markerArrays.forEach(marker => {
        marker.setMap(null);
      });
    },
    // 信息窗
    infoWin(detail, map, myLatlng) {
      var that = this;
      var address = "";
      var geocoder = new qq.maps.Geocoder({
        complete: function(result) {
          infoWin.open();
          address =
            result.detail.nearPois[0].address + result.detail.nearPois[0].name;
          //tips  自定义内容
          infoWin.setContent(
            '<div style="width:300px;padding-top:5px;">' +
              "设备：" +
              detail.deviceName +
              "</br>地址：" +
              address +
              "</br>经纬度：" +
              detail.latitude +
              " / " +
              detail.longitude +
              "</div>"
          );
          infoWin.setPosition(myLatlng);
        }
      });
      geocoder.getAddress(myLatlng);
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
    },
    // 添加标注
    markers(map) {
      // 地址逆解析
      var that = this;
      that.clearMarkers();
      var data = [];
      if (that.searchData.length > 0) {
        data = that.searchData;
      } else {
        data = that.deviceData;
      }
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        var myLatlng = new qq.maps.LatLng(element.latitude, element.longitude);
        // 添加标注
        var marker = new qq.maps.Marker({
          position: myLatlng,
          map: map
        });
        that.markerArrays.push(marker);
        that.infoWin(element, map, myLatlng, that.address);
      }
    },
    // 初始化地图
    init(deviceName) {
      var that = this;
      //定义工厂模式函数
      var myOptions = {
        zoom: 13, //设置地图缩放级别
        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
      };

      //获取dom元素添加地图信息
      var map = new qq.maps.Map(
        document.getElementById("deviceMap"),
        myOptions
      );

      //添加比例尺
      var scaleControl = new qq.maps.ScaleControl({
        align: qq.maps.ALIGN.BOTTOM_LEFT,
        margin: qq.maps.Size(85, 15),
        map: map
      });

      //获取城市列表接口设置中心点
      var citylocation = new qq.maps.CityService({
        complete: function(result) {
          map.setCenter(result.detail.latLng);
        }
      });

      that.markers(map);
      citylocation.searchLocalCity();
    },
    getData() {
      this.$api.device.DeviceInfoList({ pageQuery: false }).then(res => {
        this.deviceData = res.records;
        this.init();
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

显示结果

接下来就看自己想怎么玩了详细的可以看官方文档
JavaScript API