vue + 百度地图 实现大屏嵌入地图
效果图1.首先在 pubilc 中 index.html 文件引入<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的ak"></script>2.html 部分代码<template><div class="map_section">&
·
效果图
1.首先在 pubilc 中 index.html 文件引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的ak"></script>
2.html 部分代码
<template>
<div class="map_section">
<div class="map_box" id="mapbox"></div>
</div>
</template>
3.script 代码
<script>
// 引入图片 方便后期使用 鼠标hover显示文字
import mapAddressIcon from "@/assets/img/dp_image/huang_lv.png";
export default {
name: "map-page-index",
data() {
return {
allDataList: [
{
longitude: "118.89945",
latitude: "31.57325",
dwmc: "明觉支行",
data1: "1124",
isShow: true,
isShowTwo: true,
typeDataVlaue: "1"
},
], // 所有数组
mapAddressIcon: mapAddressIcon, // 引入的图片
map: null
}
},
mounted() {
this.getDataFn();
},
methods: {
getDataFn(){
this.initCreatedBmap();
this.initAddMarker();
},
//long = "119.03065", lat = "31.585568", zoomIndex = 11 默认位置 大小
initCreatedBmap(long = "119.03065", lat = "31.585568", zoomIndex = 11) {
let map = new BMap.Map("mapbox", {
enableMapClick: false
});
let region = "溧水区";
this.drawPolygon(region);
let point = new BMap.Point(long, lat);
map.centerAndZoom(point, zoomIndex);
map.enableScrollWheelZoom(true);
map.setMapStyleV2({
styleId: "74e2530c8ee1d179e8ff860bdd6a5100" // 这个id 需要自己去百度地图中发布
});
// 也可以用系统自带的
// map.setMapStyle({ style: "midnight" });
this.map = map;
},
// 绘制行政区划轮廓
drawPolygon(regionName) {
let that = this;
let bdary = new BMap.Boundary();
bdary.get(regionName, function(rs) {
let count = rs.boundaries.length;
if (!count) {
console.log("未能获取到当前输入的行政区域");
return;
}
for (let i = 0; i < count; i++) {
//创建多边形覆盖物
let ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 4,
strokeColor: "#01D6F8",
fillOpacity: 0.6,
strokeStyle: "solid"
});
ply.setFillColor("#285E89");
//添加覆盖物
that.map.addOverlay(ply);
}
});
},
initAddMarker(arr) {
let that = this;
let dataArr = that.allDataList;
let bigSize = new BMap.Size(30, 30);
let icon1 = new BMap.Icon(that.mapAddressIcon, bigSize);
dataArr.map(item => {
let mapIcon = icon1;
mapIcon.setImageSize(bigSize); // 背景图 大小
let point = new window.BMap.Point(item.longitude, item.latitude);
let labelContent = item.dwmc;
let num = `${item.data1}`;
let optsion = {
point: 0,
offset: 0,
enableMassClear: true
};
let marker = new window.BMap.Marker(point, { icon: icon1 });
let label = new window.BMap.Label(item.dwmc[0], optsion);
// marker.setIcon(mapIcon)
marker.setLabel(label);
// 自行加判断
// if (!item.isShow && !item.isShowTwo) {
// 休业 撤防
label.setStyle({
// 设置label的样式
width: "30px",
height: "30px",
background: item.typeDataVlaue == 1 ? "#1BE000" : "#FFF600",
borderRadius: "50%",
lineHeight: "22px",
textAlign: "center",
fontFamily: "Microsoft YaHei",
fontWeight: "bold",
color: "rgba(139, 139, 139, 1)",
fontSize: "15px",
borderWidth: "4px",
borderStyle: "solid",
borderColor: "rgba(0, 170, 44, 1)"
});
this.map.addOverlay(marker);
// 点击跳转页面
marker.addEventListener("click", async item => {
let index = this.allDataList.findIndex(
item => item.dwmc == labelContent
);
this.allDataList.forEach(item => {
if (item.dwmc == labelContent) {
this.ItemData = item;
}
});
if (index != -1) {
this.$router.push({
name: "cockpit-cockpitTwoPageIndex",
params: { name: labelContent, data: this.ItemData }
});
}
});
// 鼠标划入
marker.addEventListener("mouseover", async () => {
// if (item.typeDataVlaue == "1") {
var label = new BMap.Label(
`<span style="font-size: 15px;font-family: Microsoft YaHei;font-weight: bold;color: #FFF; line-height: 4px;display: inline-block;transform: skewX(20deg);">${labelContent}(${num})</span>`,
{
offset: new BMap.Size(0, -35)
}
);
label.setStyle({
textAlign: "center",
width: "132px",
height: "26px",
transform: "skewX(-20deg)",
background: "rgba(25, 244, 2, .7)",
borderRadius: "2px",
border: "2px solid #19F402",
borderRadius: "5px",
lineHeight: "26px"
});
// }
marker.setLabel(label);
});
// 鼠标划出
marker.addEventListener("mouseout", function(e) {
var label = this.getLabel();
//设置标签内容为空
label.setContent("");
//设置标签边框宽度为0
label.setStyle({ border: "none", width: "0px", padding: "0px" });
});
});
},
},
destroyed() {
this.map = null;
}
}
</script>
3. css 代码
.map_section {
height: 599px;
width: 837px;
.map_box {
width: inherit;
height: inherit;
}
}
/* 隐藏地图的baidulogo */
::v-deep .anchorBL {
display: none;
}
4.完成
更多推荐
已为社区贡献4条内容
所有评论(0)