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("返回得地圖數(shù)據(jù)", 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();
? ? // 循環(huán)需要展示的點覆蓋信息
? ? 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 : "詳情" , // 信息窗口標題
? ? ? ? };
? ? ? ? // 信息窗口顯示內(nèi)容
? ? ? ? var sContent = `<div>
? ? ? ? ? <div>產(chǎn)品名稱：${e.target.customData.bujian} </div>
? ? ? ? ? <div>生產(chǎn)地：${e.target.customData.cd} </div>
? ? ? ? ? <div>簽單總數(shù)：${e.target.customData.qdl} </div>
? ? ? ? ? <div>金額：${e.target.customData.amount} </div>
? ? ? ? </div>`;
? ? ? ? var infoWindow = new BMapGL.InfoWindow(sContent, opts); // 創(chuàng)建信息窗口對象
? ? ? ? map.openInfoWindow(infoWindow, point); //開啟信息窗口
? ? ? });
? ? ? map.addOverlay(marker);
? ? }
? }
}
</script>
<style scoped>
.btnStyle {
? background: pink;
? color: #fff;
? width: 100px;
? height: 50px;
}
</style>
