Skip to content

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

地图

parent 18f24286
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 121 deletions
public/index.html
View file @ dbf0a7b1
......@@ -5,9 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit">
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></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/CurveLine/1.5/src/CurveLine.min.js"></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 src="http://mapv.baidu.com/build/mapv.min.js"></script>
......
src/components/sellDashboard/map/centerMpBaidu.vue
View file @ dbf0a7b1
......@@ -4,9 +4,9 @@
justify-content: center;
align-items: center;
}
.BMap_noprint,.anchorBL{
/* .BMap_noprint,.anchorBL{
display: none;
}
} */
.centerMpBaidu-box .BMap_Marker img{
}
......@@ -17,11 +17,11 @@
</div>
</template>
<script>
import BMap from 'BMap'
export default {
props: ['baiduMapData'],
data(){
return {
map: {}
}
},
watch: {
......@@ -32,124 +32,109 @@ export default {
},mounted() {
},methods:{
markerClick(e){
alert(111)
},
creatMap(){
let _this = this
let data = this.baiduMapData;
const BMap = window.BMap
//实例化，并设置最大最小缩放层级
const map = new BMap.Map("centerMpBaidu", {
minZoom: 3,
maxZoom: 20,
});
//清楚覆盖物
map.clearOverlays();
const map = new BMap.Map("centerMpBaidu", {
minZoom: 3,
maxZoom: 20,
});
//设置中心点、默认缩放层级
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);
}
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);
map.enableScrollWheelZoom(true);
//2、 设置 默认主题 和 自定义主题
// 默认主题 normal blueSky light dark googlelite grassgreen midnight pink bluish grayscale
// 还有几个默认主题，但是发现并不好使
map.setMapStyle({
style: 'midnight'
// 主题
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 });
// const infoWindow = new BMap.InfoWindow('简易的信息窗口')
//绑定事件，显示窗口
marker.addEventListener("click", function(){
_this.markerClick(point, item)
// map.openInfoWindow(infoWindow,point);
});
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] })
markerClusterers[item.type || 0].push(marker)
//添加点标注即添加覆盖物
map.addOverlay(marker);
})
// //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] })
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);
}
})
}
}
}
......
src/components/sellDashboard/map/centerMpBaidu2.vue
View file @ dbf0a7b1
......@@ -5,7 +5,7 @@
align-items: center;
}
.BMap_noprint,.anchorBL{
display: none;
/* display: none; */
}
</style>
<template>
......
src/components/sellDashboard/map/viittoMap.vue
View file @ dbf0a7b1
......@@ -7,7 +7,6 @@
import echarts from "echarts";
// import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson","dataArea"],
......
src/components/sellDashboard/map/viittoMap3.vue
View file @ dbf0a7b1
......@@ -7,7 +7,6 @@
import echarts from "echarts";
// import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
name: "echarts",
props: ["userJson","dataArea", "newArr"],
......
src/components/viitto/viittoData.vue
View file @ dbf0a7b1
......@@ -347,9 +347,9 @@ ul li {
<p class="name">印象之旅数据看板</p>
</div>
<el-row>
<el-col :span="20" v-if="dataArea.length>0 && newArr.length>0">
<el-col :span="20" >
<div class="map-box" style="position:relative;top:-50px;left:-140px;">
<centerMp :dataArea="dataArea" :newArr="newArr"></centerMp>
<centerMp v-if="dataArea.length>0 && newArr.length>0" :dataArea="dataArea" :newArr="newArr"></centerMp>
</div>
</el-col>
<el-col :span="4">
......
src/components/viitto/viittoData2.vue
View file @ dbf0a7b1
......@@ -335,7 +335,7 @@
<div class="color-type">
<div>
<p>激活 <span class="b"></span></p>
<p>非正式 <span class="y"></span></p>
<p>未拜访 <span class="y"></span></p>
<p>未激活 <span></span></p>
</div>
</div>
......
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