vue项目+ts+百度地图的使用

1.引入百度地图

<template>

  <div>

    <div id="allmap" ref="allmap" style="height: 100vh; width: 100%"></div>

  </div>

</template>

<script lang="ts">

import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";

import { User } from "@/classes/User";

import { Menu } from "@/classes/Menu";

import qs from "qs";

import QueryEntity from "@/classes/search/QueryEntity";

import { BIPUtil } from "@/utils/Request";

let tools = BIPUtil.ServApi;

import { BaseVariable } from "@/utils/BaseICL";

import { State, Action, Getter, Mutation } from "vuex-class";

import { LoginState } from "@/store/modules/login/types";

import { Row } from "element-ui";

import transferObj from "../../../public/static/config.json";

declare const BMapGL: any;

@Component

export default class Newceshi extends Vue {

  async mounted() {

    let data = {

      apiId: "originMap",

      dbid: transferObj.dbid,

      usercode: "admin",

      pid: "CP000021",

      startTime: "1991-01-01",

      endTime: "2021-11-24",

      bjid: "BJ000016,BJ000020",

    };

    data = qs.stringify(data);

    let res: any = await Vue.$axios.post(transferObj.ApiUrl + "/sysapi", data);

    console.log("返回得地图数据", res);

    let mapdata: any = res.data.data.list;

    this.shuju(mapdata);

  }

  shuju(mapdata: any) {

    let _this = this;

    const map = new BMapGL.Map("allmap", {

      restrictCenter: false,

      // minZoom:0, //显示比例

      // maxZoom:12

    });

    var point = new BMapGL.Point(mapdata[0].jd, mapdata[0].wd);

    map.centerAndZoom(point, 5); //显示范围大小

    map.enableScrollWheelZoom();

    // 循环需要展示的点覆盖信息

    for (var i = 0; i < mapdata.length; i++) {

      var pt = new BMapGL.Point(mapdata[i].jd, mapdata[i].wd);

      var marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 130000, {

        size: 40,//大小

        shape: "BMAP_SHAPE_CIRCLE",

        fillColor: "#d55626",//颜色

        fillOpacity: 0.6,//透明度

      });

      // 覆盖物添加自定义属性

      marker.customData = {

        bujian: mapdata[i].bujian,

        cd: mapdata[i].cd,

        qdl: mapdata[i].qdl,

        amount: mapdata[i].amount,

        jd: mapdata[i].jd,

        wd: mapdata[i].wd,

      };

      // 覆盖物添加点击事件

      marker.addEventListener("click", function (e: any) {

        console.log("打印信息", e.target.customData);

        let point = new BMapGL.Point(

          e.target.customData.jd,

          e.target.customData.wd

        );

        var opts = {

          width: 200, // 信息窗口宽度

          height: 100, // 信息窗口高度

          title : "详情" , // 信息窗口标题

        };

        // 信息窗口显示内容

        var sContent = `<div>

          <div>产品名称：${e.target.customData.bujian} </div>

          <div>生产地：${e.target.customData.cd} </div>

          <div>签单总数：${e.target.customData.qdl} </div>

          <div>金额：${e.target.customData.amount} </div>

        </div>`;

        var infoWindow = new BMapGL.InfoWindow(sContent, opts); // 创建信息窗口对象

        map.openInfoWindow(infoWindow, point); //开启信息窗口

      });

      map.addOverlay(marker);

    }

  }

}

</script>

<style scoped>

.btnStyle {

  background: pink;

  color: #fff;

  width: 100px;

  height: 50px;

}

</style>