Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
Muse
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
罗超
Muse
Commits
dbf0a7b1
Commit
dbf0a7b1
authored
Nov 22, 2019
by
华国豪
🙄
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
地图
parent
18f24286
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
102 additions
and
121 deletions
+102
-121
index.html
public/index.html
+1
-3
centerMpBaidu.vue
src/components/sellDashboard/map/centerMpBaidu.vue
+97
-112
centerMpBaidu2.vue
src/components/sellDashboard/map/centerMpBaidu2.vue
+1
-1
viittoMap.vue
src/components/sellDashboard/map/viittoMap.vue
+0
-1
viittoMap3.vue
src/components/sellDashboard/map/viittoMap3.vue
+0
-1
viittoData.vue
src/components/viitto/viittoData.vue
+2
-2
viittoData2.vue
src/components/viitto/viittoData2.vue
+1
-1
No files found.
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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment