1.引入百度地图
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 = `
var infoWindow = new BMapGL.InfoWindow(sContent, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
map.addOverlay(marker);
}
}
}
.btnStyle {
background: pink;
color: #fff;
width: 100px;
height: 50px;
}