Skip to content

S
SuperMan
Commit 2ec66694 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

优化客户地图

parent 0b9e3cb8
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 102 deletions
index.html
View file @ 2ec66694
......@@ -7,9 +7,13 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate, no-store">
<meta http-equiv="Expires" content="0">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> -->
<script type="text/javascript" src="static/MarkerClusterer.js"></script>
<script type="text/javascript" src="static/CurveLine.min.js"></script>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script>
<title>四川和平国际旅行社</title>
</head>
<body>
......
src/components/SalesModule/customerMap.vue
View file @ 2ec66694
......@@ -3,10 +3,35 @@
width: 100%;
height: 100%;
}
.color-info{
position: absolute;
left: 30px;
top: 15px;
padding: 10px 20px;
background-color: rgba(206, 206, 206, .5);
}
.color-info>span{
font-size: 14px;
padding-right: 15px;
}
.color-info .raius-color{
height: 10px;
width: 10px;
display: inline-block;
background-color: #1eb3ff;
border-radius: 50%;
}
.color-info .g .raius-color{
background-color: #5fffa3;
}
</style>
<template>
<div class="customerMap">
<div :style="{height:'100%',width:'100%'}" ref="myEchart" id="centerMpBaidu"></div>
<div class="color-info">
<span class="b">正式: <span class="raius-color"></span></span>
<span class="g">非正式: <span class="raius-color"></span></span>
</div>
</div>
</template>
<script>
......@@ -15,121 +40,80 @@ export default {
return {
map: {},
baiduMapData: [],
centerP: null
centerP: null,
options0: {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#1eb3ff'
},
options1: {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#5fffa3'
},
list0: [],
list1: [],
};
},
methods: {
creatMap(arr, type){
let _this = this
let data = this.baiduMapData;
//实例化，并设置最大最小缩放层级
let map = map = new BMap.Map("centerMpBaidu", {
this.map = new BMap.Map("centerMpBaidu", {
minZoom: 3,
maxZoom: 20,
});
//设置中心点、默认缩放层级
if (_this.centerP) {
map.centerAndZoom(new BMap.Point(_this.centerP.Lng, _this.centerP.Lat), 10);
this.map.centerAndZoom(new BMap.Point(_this.centerP.Lng, _this.centerP.Lat), 10);
} else {
map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
this.map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
}
this.map.setMapStyleV2({
styleId: '33046c341768c2774ab011cc7cf013d1'
});
//可以鼠标缩放
map.enableScrollWheelZoom(true);
const points = data
const markerClusterers = [[], [], []]
this.map.enableScrollWheelZoom(true);
const points = this.baiduMapData;
const markerClusterers = [[], [], []];
let list0 = [], list1 = [], list2 = [];
points.forEach(item => {
//实例化点
const point = new BMap.Point(item.Lng, item.Lat)
//自定义点的样式
// type 0 激活 绿色 20191125022113414
// 1 未拜访 紫色 20191125022118834
// 2 未激活 蓝色 20191125022116319
const icon = new BMap.Icon(
item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
new BMap.Size(34, 34)
);
//生成点标注
const marker = new BMap.Marker(point, { icon: icon });
// const infoWindow = new BMap.InfoWindow('简易的信息窗口')
//绑定事件，显示窗口
marker.addEventListener("click", function(){
_this.markerClick(point, item)
});
markerClusterers[item.type || 0].push(marker)
//添加点标注即添加覆盖物
map.addOverlay(marker);
})
// //2种聚合的实现
const size = new BMap.Size( 34, 34 )
var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[1],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 14,
textColor: 'white',
}]
})
var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[2],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 14,
textColor: 'white',
}]
})
var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 14,
textColor: 'white',
}] })
this.map = map
},
markerClick(point, item){
this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: item.CustomerId}, res=>{
if(res.data.resultCode == 1) {
const infoWindow = new BMap.InfoWindow(`
<p>联系人：${res.data.data.Contact}</p>
<p>联系电话：${res.data.data.ContactNumber}</p>
<p>门店名称：${res.data.data.CustomerName}</p>
<p>门店地址：${res.data.data.Address}</p>
`)
this.map.openInfoWindow(infoWindow, point);
let obj = new BMap.Point(item.Lng, item.Lat)
obj.CustomerId = item.CustomerId
if(item.type == 0) {
list0.push(obj)
} else if (item.type == 1){
list1.push(obj)
}
})
this.list0 = list0;
this.list1 = list1;
this.changePointsColor(this.list0,this.options0);
this.changePointsColor(this.list1,this.options1);
},
changePointsColor(points, options){
var map = this.map;
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
map.addOverlay(pointCollection); // 添加Overlay
this.markerClick(pointCollection);// 给点添加点击事件
},
markerClick(pointCollection){
var _this = this;
var map = this.map;
var data = this.markdatas;
pointCollection.addEventListener('click', function (e) {
_this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: e.point.CustomerId}, res=>{
if(res.data.resultCode == 1) {
const infoWindow = new BMap.InfoWindow(`
<p style="font-size: 14px;">联系人：${res.data.data.Contact}</p>
<p style="font-size: 14px;">联系电话：${res.data.data.ContactNumber}</p>
<p style="font-size: 14px;">门店名称：${res.data.data.CustomerName}</p>
<p style="font-size: 14px;">门店地址：${res.data.data.Address}</p>
`)
_this.map.openInfoWindow(infoWindow, e.point);
}
})
});
}
},
mounted() {
......@@ -148,13 +132,13 @@ export default {
x.type = 0
})
data.InActiveList.map(x=>{
x.type = 2
x.type = 0
})
data.NotVisit.map(x=>{
x.type = 1
})
// let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit];
let baiduMapData = [...data.NotVisit, ...data.ActivateList];
let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit];
// let baiduMapData = [...data.NotVisit, ...data.ActivateList];
this.baiduMapData = baiduMapData
this.creatMap()
}
......
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