Skip to content

M
Muse
Commit b817d9be authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 2e056357
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 20 deletions
src/components/sellDashboard/map/centerMpBaidu.vue
View file @ b817d9be
......@@ -6,6 +6,9 @@
}
.BMap_noprint,.anchorBL{
display: none;
}
.centerMpBaidu-box .BMap_Marker img{
}
</style>
<template>
......@@ -26,31 +29,127 @@ export default {
this.creatMap()
}
},created(){
},mounted() {
},methods:{
markerClick(e){
alert(111)
},
creatMap(){
let map = new BMap.Map("centerMpBaidu");
map.setMapStyle({
style: 'midnight'
});
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var MAX = this.baiduMapData.length;
let _this = this
let data = this.baiduMapData;
if (data.length > 0) {
map.centerAndZoom(new BMap.Point(data[0].Lng, data[0].Lat), 10);
} else {
map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
}
var markers = [];
var pt = null;
for (let i = 0; i < MAX; i++) {
pt = new BMap.Point(data[i].Lng, data[i].Lat);
markers.push(new BMap.Marker(pt));
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
const BMap = window.BMap
//实例化，并设置最大最小缩放层级
const map = new BMap.Map("centerMpBaidu", {
minZoom: 3,
maxZoom: 20,
});
//清楚覆盖物
map.clearOverlays();
//设置中心点、默认缩放层级
if (data.length > 0) {
map.centerAndZoom(new BMap.Point(data[0].Lng, data[0].Lat), 10);
} else {
map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
}
//可以鼠标缩放
map.enableScrollWheelZoom(true);
//2、 设置 默认主题 和 自定义主题
// 默认主题 normal blueSky light dark googlelite grassgreen midnight pink bluish grayscale
// 还有几个默认主题，但是发现并不好使
map.setMapStyle({
style: 'midnight'
});
const points = data
const markerClusterers = [[], [], []]
points.forEach(item => {
//实例化点
const point = new BMap.Point(item.Lng, item.Lat)
//自定义点的样式
// type 0 激活 蓝色五角星 20191119035847676
// 1 非正式 黄色五角星 20191119035853676
// 2 未激活 红色五角星 20191119035858082
const icon = new BMap.Icon(
item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035847676.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
new BMap.Size(48, 48)
);
//生成点标注
const marker = new BMap.Marker(point, { icon: icon });
//动画
// marker.setAnimation(BMAP_ANIMATION_BOUNCE)
//文字标签
// const label = new BMap.Label(
// '我是文字描述',
// { offset: new BMap.Size( 20, 20 ) }
// )
// label.setStyle({
// color : "red",
// fontSize : "12px",
// height : "20px",
// lineHeight : "20px",
// fontFamily:"微软雅黑"
// });
// marker.setLabel(label);
//绑定事件
// if (item.func) marker.addEventListener("click", function () {alert('你好')});
marker.addEventListener("click", function(e){ //点击marker显示label
_this.markerClick(e)
});
markerClusterers[item.type || 0].push(marker)
//添加点标注即添加覆盖物
map.addOverlay(marker);
})
//清除覆盖物
// markerClusterers.forEach((item, index) => {
// if (window[`markerClusterer${index}`]) window[`markerClusterer${index}`].clearMarkers()
// // delete this.markerClusterer
// window[`markerClusterer${index}`] = null
// })
//2种聚合的实现
const size = new BMap.Size( 48, 48 )
var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[1],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
size: size,
textSize: 18,
textColor: 'white',
}]
})
var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[2],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
size: size,
textSize: 18,
textColor: 'white',
}]
})
var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0] })
}
}
}
......
src/components/viitto/viittoData2.vue
View file @ b817d9be
......@@ -246,6 +246,36 @@
color: white;
cursor: pointer;
}
.color-type{
position: absolute;
top: 10px;
left: 50px;
padding: 3px 18px;
color: white;
font-size: 14px;
}
.color-type span{
width: 6px;
height: 6px;
display:inline-block;
background-color: #d81e06;
margin-left: 10px;
}
.color-type span.b{
background-color: #1296db;
}
.color-type span.y{
background-color: #f4ea2a;
}
.color-type>div{
display: flex;
align-items: center;
}
.color-type p{
display: flex;
margin-right: 20px;
align-items: center;
}
</style>
<template>
<div class="viittoData2" >
......@@ -302,6 +332,13 @@
</div>
<div class="map-box map-box-centerMpBaidu" v-if="!centerMpShow" style="position:relative;z-index:1;">
<div class="map-box-centerMpBaidu-return" @click="centerMpShow = true, baiduMapData = []">返回</div>
<div class="color-type">
<div>
<p>激活 <span class="b"></span></p>
<p>非正式 <span class="y"></span></p>
<p>未激活 <span></span></p>
</div>
</div>
<centerMpBaidu :baiduMapData="baiduMapData" ></centerMpBaidu>
</div>
<el-row class="tonghangshu">
......@@ -411,6 +448,15 @@ export default {
this.apipost('financestatistics_post_GetB2BBoardClientAddressList', {ProvinceName: r}, res=>{
if(res.data.resultCode == 1) {
let data = res.data.data
data.ActivateList.map(x=>{
x.type = 0
})
data.InActiveList.map(x=>{
x.type = 2
})
data.NotVisit.map(x=>{
x.type = 1
})
let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit]
this.baiduMapData = baiduMapData
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment