<template>
<div class="mapContainer">
<!-- <div id="tMap" /> -->
<div id="tMap" ref="tMap" />
</div>
</template>
<script>
import { TDIMap, BaiduMap } from "@/utils/map.js";
import marki1 from "@/assets/map/i-1.png";
import marki2 from "@/assets/map/i-2.png";
import marki3 from "@/assets/map/i-3.png";
import marki4 from "@/assets/map/i-4.png";
import marki5 from "@/assets/map/i-5.png";
import marki6 from "@/assets/map/i-6.png";
import marki7 from "@/assets/map/i-7.png";
import markBg1 from "@/assets/map/m-t-bg1.png";
import markBg2 from "@/assets/map/m-t-bg2.png";
import markBg3 from "@/assets/map/m-t-bg3.png";
import markBg4 from "@/assets/map/m-t-bg4.png";
import markBg5 from "@/assets/map/m-t-bg5.png";
import markBg6 from "@/assets/map/m-t-bg6.png";
import markBg7 from "@/assets/map/m-t-bg7.png";
import mapdbg from "@/assets/dzdl/mapdbg.png";
const $tdMap = null;
export default {
name: "TdMap",
props: {
dataList: {
type: Array,
default: () => {
return [
{
lat: "118.174014",
lng: "30.732226",
name: "这里是景区名称",
},
];
},
},
},
data() {
return {
// lat: 30.930916,
// lng: 118.344438,
//118.17193,30.727538
// lat: 30.927928,
// lng: 118.194855,
lat: 30.679277,
lng: 118.140187,
mapLevel: 15,
};
},
watch: {
dataList: {
handler() {
// this.initBaiDu();
this.bgMark();
},
deep: true,
},
},
mounted() {
this.initBaiDu();
},
created() {},
methods: {
initBaiDu() {
const _this = this;
BaiduMap.init().then((BMap) => {
_this.map = new BMapGL.Map(_this.$refs.tMap);
_this.map.centerAndZoom(
new BMapGL.Point(_this.lng, _this.lat),
_this.mapLevel
);
// _this.map.addControl(
// new BMapGL.MapTypeControl({
// // mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型+混合
// // mapTypes: [BMAP_NORMAL_MAP], //图层类型
// // anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置
// })
// );
_this.map.enableScrollWheelZoom();
let zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
_this.map.addControl(zoomCtrl);
//地图个性化
_this.map.setMapStyleV2({
styleId: "2ab34170567eb610404d09569833f505",
});
//划区域
setTimeout(() => {
_this.getBoundary();
}, 2000);
//其他 隐藏
// _this.map.setDisplayOptions({
// poiText: false, // 隐藏poi标注
// poiIcon: false, // 隐藏poi图标
// building: false, // 隐藏楼块
// });
//手绘地图图层
let pStart = new BMapGL.Point(118.09886, 30.64971);
let pEnd = new BMapGL.Point(118.16901, 30.71585);
// let pStart = new BMapGL.Point(118.16901, 30.71585);
// let pEnd = new BMapGL.Point(118.09886, 30.64971);
let bounds = new BMapGL.Bounds(
new BMapGL.Point(pStart.lng, pEnd.lat),
new BMapGL.Point(pEnd.lng, pStart.lat)
);
let imgOverlay = new BMapGL.GroundOverlay(bounds, {
type: "image",
url: mapdbg,
opacity: 1,
});
imgOverlay.disableMassClear();
_this.map.addOverlay(imgOverlay);
// _this.getBoundary();
});
},
getBoundary() {
// const _this = this;
// let bdary = new BMap.Boundary();
// bdary.get("安徽省芜湖市南陵县", function (rs) {
//获取行政区域
// _this.map.clearOverlays(); //清除地图覆盖物
// let count = rs.boundaries.length; //行政区域的点有多少个
// if (count === 0) {
// alert("未能获取当前输入行政区域");
// return;
// }
// let pointArray = [];
// for (let i = 0; i < count; i++) {
// let ply = new BMap.Polygon(rs.boundaries[i], {
// strokeWeight: 3,
// strokeColor: "#13EBFF",
// strokeStyle: "dashed",
// fillColor: "#08304B",
// fillOpacity: 0.2,
// isBuildingMask: true,
// isPoiMask: true,
// isMapMask: true,
// }); //建立多边形覆盖物
// _this.map.addOverlay(ply); //添加覆盖物
// pointArray = pointArray.concat(ply.getPath());
// }
// _this.map.setViewport(pointArray); //调整视野
//地图标点=========================
this.bgMark();
// });
},
//坐标点标记
bgMark() {
let _this = this;
const marArr = _this.dataList;
let mark = "";
let markBg = "";
let colorBg = "";
// _this.map.clearOverlays(); //清楚原有坐标
_this.removeMarkets();
for (var i = 0; i < marArr.length; i++) {
let type = marArr[i].type;
switch (type) {
case 1:
mark = marki1;
markBg = markBg1;
colorBg = "#43E185";
break;
case 2:
mark = marki2;
markBg = markBg2;
colorBg = "#FF9F2C";
break;
case 3:
mark = marki3;
markBg = markBg3;
colorBg = "#44ACFF";
break;
case 4:
mark = marki4;
markBg = markBg4;
colorBg = "#BD7AF2";
break;
case 5:
mark = marki5;
markBg = markBg5;
colorBg = "#FF91E2";
break;
case 6:
mark = marki6;
markBg = markBg6;
colorBg = "#1EE8FB";
break;
case 7:
mark = marki7;
markBg = markBg7;
colorBg = "#FF6459";
break;
default:
mark = marki1;
markBg = markBg1;
colorBg = "#43E185";
}
if (marArr[i].lat && marArr[i].lng) {
_this.myIcon = new BMapGL.Icon(mark, new BMapGL.Size(42, 50));
let marker = new BMapGL.Marker(
new BMapGL.Point(marArr[i].lat, marArr[i].lng),
{
icon: _this.myIcon,
}
);
_this.map.addOverlay(marker);
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
// 创建信息窗口
let scont =
"<div class='tcont' style='background-image:url(" +
markBg +
");color:" +
colorBg +
"'>" +
marArr[i].name +
"</div>";
let opts = {
width: 150,
};
let infoWindow = new BMapGL.InfoWindow(scont, opts);
// 点标记添加点击事件
let point = new BMapGL.Point(marArr[i].lat, marArr[i].lng);
marker.addEventListener("click", function () {
_this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
}
}
},
//删除坐标
removeMarkets() {
let _this = this;
let markers_gis = _this.map.getOverlays();
if (markers_gis.length > 0) {
for (let i = 0; i < markers_gis.length; i++) {
_this.map.removeOverlay(markers_gis[i]);
}
//清楚标点后再添加 手绘地图图层
let pStart = new BMapGL.Point(118.099997, 30.668052);
let pEnd = new BMapGL.Point(118.165969, 30.728666);
let bounds = new BMapGL.Bounds(
new BMapGL.Point(pStart.lng, pEnd.lat),
new BMapGL.Point(pEnd.lng, pStart.lat)
);
let imgOverlay = new BMapGL.GroundOverlay(bounds, {
type: "image",
url: mapdbg,
opacity: 1,
});
imgOverlay.disableMassClear();
_this.map.addOverlay(imgOverlay);
}
},
},
};
</script>
<style lang="scss" scoped>
.mapContainer {
width: 100%;
z-index: 4;
height: 100%;
}
#tMap {
width: 100%;
height: 100%;
}
</style>
标签：map,标点,BMapGL,let,png,import,new,手绘,百度 From： https://www.cnblogs.com/Byme/p/16943521.html