@ -7,9 +7,9 @@
< script > < script >
import MapLine from "../../../public/zhenhaiLine.json" import MapLine from "../../../public/zhenhaiLine.json"
/ / i m p o r t M a p P o i n t f r o m " . . / . . / . . / p u b l i c / z h e n h a i P o i n t . j s o n import MapPoint from "../../../public/zhenhaiPoint.json
import styleJson from "../../../public/custom_map_config.json" import styleJson from "../../../public/custom_map_config.json"
import { topMap } from '@/api/offLineMap' import { topMap , topMapOne } from '@/api/offLineMap'
export default { export default {
name : 'zhenhaimap' ,
name : 'zhenhaimap' ,
data ( ) {
data ( ) {
@ -19,11 +19,16 @@ export default {
villageList : [ ] ,
villageList : [ ] ,
villageSumList : [ ] ,
villageSumList : [ ] ,
flag : true ,
flag : true ,
companyList : [ ]
}
}
} ,
} ,
mounted ( ) {
mounted ( ) {
topMap ( { scoreType : 'season' } )
topMap ( { scoreType : 'season' } ) . then ( res => {
this . initMap ( )
this . companyList = res . data
this . initMap ( )
} )
topMapOne ( { companyId : 4 , companyName : '宁波顺帆净水剂有限公司' } )
} ,
} ,
methods : {
methods : {
goBack ( ) {
goBack ( ) {
@ -33,7 +38,7 @@ export default {
} ,
} ,
initMap ( ) {
initMap ( ) {
var BMap = window . BMap
var BMap = window . BMap
console . log ( BMap , 'BMap' )
/ / c o n s o l e . l o g ( B M a p , ' B M a p ' )
var map = new BMap . Map ( 'container' , {
var map = new BMap . Map ( 'container' , {
style : {
style : {
styleJson
styleJson
@ -41,7 +46,7 @@ export default {
} ) ;
} ) ;
let that = this
let that = this
map . centerAndZoom ( new BMap . Point ( this . dongtaiPoint [ 0 ] , this . dongtaiPoint [ 1 ] ) , 12 ) ;
map . centerAndZoom ( new BMap . Point ( this . dongtaiPoint [ 0 ] , this . dongtaiPoint [ 1 ] ) , 12 ) ;
map . setMinZoom ( 11
/ / m a p . s e t M i n Z o o m ( 1 1
map . setMaxZoom ( 19 )
map . setMaxZoom ( 19 )
map . enableScrollWheelZoom ( true ) ;
map . enableScrollWheelZoom ( true ) ;
/ / h j r e q u e s t ( {
/ / h j r e q u e s t ( {
@ -51,11 +56,12 @@ export default {
/ / } ) . t h e n ( ( r e s ) = > {
/ / } ) . t h e n ( ( r e s ) = > {
/ / t h a t . v i l l a g e S u m L i s t = r e s . d a t a
/ / t h a t . v i l l a g e S u m L i s t = r e s . d a t a
/ / } )
/ / } )
console . log ( MapLine , 'MapLine' )
/ / c o n s o l e . l o g ( M a p L i n e , ' M a p L i n e ' )
for ( var i = 0 , n = MapLine . features . length ; i < n ; i ++ ) {
for ( var i = 0 , n = MapLine . features . length ; i < n ; i ++ ) {
showBoundaryEx ( MapLine . features [ i ] ) ;
showBoundaryEx ( MapLine . features [ i ] ) ;
}
}
var label = new BMap . Label ( ) ;
showPoint ( )
function showBoundaryEx ( city ) {
function showBoundaryEx ( city ) {
var paths = [ ]
var paths = [ ]
var list = city . geometry . coordinates
var list = city . geometry . coordinates
@ -79,9 +85,8 @@ export default {
map . addOverlay ( polygon ) ; / / 增 加 多 边 形
map . addOverlay ( polygon ) ; / / 增 加 多 边 形
}
}
/ / / / c o n s o l e . l o g ( l i s t , ' l e n g t h ' ) ;
/ / / / c o n s o l e . l o g ( l i s t , ' l e n g t h ' ) ;
} else {
} else {
console . log ( list [ 0 ] , ' list[0]' )
/ / c o n s o l e . l o g ( l i s t [ 0 ] , ' l i s t [ 0 ] ' )
for ( let i = 0 ; i < list [ 0 ] . length ; i ++ ) {
for ( let i = 0 ; i < list [ 0 ] . length ; i ++ ) {
let lat = list [ 0 ] [ i ] [ 1 ] ,
let lat = list [ 0 ] [ i ] [ 1 ] ,
lng = list [ 0 ] [ i ] [ 0 ] ;
lng = list [ 0 ] [ i ] [ 0 ] ;
@ -105,6 +110,8 @@ export default {
map . removeOverlay ( label ) ;
map . removeOverlay ( label ) ;
polygon . setFillColor ( '#3b4c44' ) ;
polygon . setFillColor ( '#3b4c44' ) ;
} ) ;
} ) ;
/ / 开 始 用 " m o u s e o v e r " , " m o u s e o u t " 发 现 , 鼠 标 移 动 过 快 , 会 多 个 省 份 也 高 亮 了 . 所 以 改 成 c l i c k 了
/ / 开 始 用 " m o u s e o v e r " , " m o u s e o u t " 发 现 , 鼠 标 移 动 过 快 , 会 多 个 省 份 也 高 亮 了 . 所 以 改 成 c l i c k 了
polygon . addEventListener ( "click" , function ( ) {
polygon . addEventListener ( "click" , function ( ) {
console . log ( city . properties . name , 'city.properties.name' ) ;
console . log ( city . properties . name , 'city.properties.name' ) ;
@ -143,33 +150,72 @@ export default {
/ / p a r a m s : g o S t r e e t D a t a
/ / p a r a m s : g o S t r e e t D a t a
/ / } ) . t h e n ( ( r e s ) = > {
/ / } ) . t h e n ( ( r e s ) = > {
/ / t h a t . v i l l a g e L i s t = r e s . d a t a
/ / t h a t . v i l l a g e L i s t = r e s . d a t a
/ / t h a t . v i l l a g e L i s t . f o r E a c h ( ( i t e m ) = > {
/ / t h a t . v i l l a g e L i s t . f o r E a c h ( ( i t e m ) = > {
/ / v a r p o i n t = n e w B M a p . P o i n t ( i t e m . l o n g i t u d e , i t e m . l a t i t u d e ) ;
/ / v a r p o i n t = n e w B M a p . P o i n t ( i t e m . l o n g i t u d e , i t e m . l a t i t u d e ) ;
/ / v a r m a r k e r = n e w B M a p . M a r k e r ( p o i n t ) ; / / 创 建 标 注
/ / v a r m a r k e r = n e w B M a p . M a r k e r ( p o i n t ) ; / / 创 建 标 注
/ / m a p . a d d O v e r l a y ( m a r k e r ) ;
/ / m a p . a d d O v e r l a y ( m a r k e r ) ;
/ / v a r c o n t e n t = i t e m . v i l l a g e N a m e ;
/ / v a r c o n t e n t = i t e m . v i l l a g e N a m e ;
/ / v a r l a b e l = n e w B M a p . L a b e l ( c o n t e n t , { / / 创 建 文 本 标 注
/ / v a r l a b e l = n e w B M a p . L a b e l ( c o n t e n t , { / / 创 建 文 本 标 注
/ / p o s i t i o n : p o i n t , / / 设 置 标 注 的 地 理 位 置
/ / p o s i t i o n : p o i n t , / / 设 置 标 注 的 地 理 位 置
/ / o f f s e t : n e w B M a p . S i z e ( - 1 0 , - 5 0 ) / / 设 置 标 注 的 偏 移 量
/ / o f f s e t : n e w B M a p . S i z e ( - 1 0 , - 5 0 ) / / 设 置 标 注 的 偏 移 量
/ / } )
/ / l a b e l . s e t S t y l e ( { b a c k g r o u n d C o l o r : ' r g b a ( 0 , 0 , 0 , 0 ) ' , b o r d e r : ' 0 ' , c o l o r : ' y e l l o w ' , f o n t S i z e : ' 2 0 p x ' } )
/ / m a p . a d d O v e r l a y ( l a b e l ) ;
/ / m a r k e r . a d d E v e n t L i s t e n e r ( " c l i c k " , f u n c t i o n ( e ) {
/ / / / C o o k i e s . s e t ( ' v i l l a g e _ c u r r e n t ' , i t e m . v i l l a g e C o d e )
/ / w i n d o w . o p e n ( w i n d o w . l o c a t i o n . o r i g i n + ' / # / c o m m u n i t y S h o w ' , ' _ b l a n k ' ) ;
/ / } ) ;
/ / } )
/ / } )
/ / l a b e l . s e t S t y l e ( { b a c k g r o u n d C o l o r : ' r g b a ( 0 , 0 , 0 , 0 ) ' , b o r d e r : ' 0 ' , c o l o r : ' y e l l o w ' , f o n t S i z e : ' 2 0 p x ' } )
/ / m a p . a d d O v e r l a y ( l a b e l ) ;
/ / m a r k e r . a d d E v e n t L i s t e n e r ( " c l i c k " , f u n c t i o n ( ) {
/ / / / C o o k i e s . s e t ( ' v i l l a g e _ c u r r e n t ' , i t e m . v i l l a g e C o d e )
/ / w i n d o w . o p e n ( w i n d o w . l o c a t i o n . o r i g i n + ' / # / c o m m u n i t y S h o w ' , ' _ b l a n k ' ) ;
/ / } ) ;
/ / } )
/ / } )
/ / } )
that . companyList . forEach ( ( item ) => {
var point = new BMap . Point ( item . longitude , item . latitude ) ;
console . log ( point , 'point' ) ;
var marker = new BMap . Marker ( point ) ; / / 创 建 标 注
map . addOverlay ( marker ) ;
var content = item . companyName ;
var label = new BMap . Label ( content , { / / 创 建 文 本 标 注
position : point , / / 设 置 标 注 的 地 理 位 置
offset : new BMap . Size ( - 10 , - 50 ) / / 设 置 标 注 的 偏 移 量
} )
label . setStyle ( { backgroundColor : ' rgba(0, 0, 0, 0)' , border : '0' , color : '#0060ce' , fontSize : '16px' } )
map . addOverlay ( label ) ;
marker . addEventListener ( "click" , function ( ) {
/ / C o o k i e s . s e t ( ' v i l l a g e _ c u r r e n t ' , i t e m . v i l l a g e C o d e )
/ / w i n d o w . o p e n ( w i n d o w . l o c a t i o n . o r i g i n + ' / # / c o m m u n i t y S h o w ' , ' _ b l a n k ' ) ;
} ) ;
} )
polygon . removeEventListener ( 'mousemove' )
polygon . removeEventListener ( 'mousemove' )
} ) ;
} ) ;
var label = new BMap . Label ( ) ;
}
}
function showPoint ( ) {
console . log ( MapPoint , 'MapPoint' ) ;
for ( let i = 0 ; i < MapPoint . features . length ; i ++ ) {
var opts = {
position : new BMap . Point ( MapPoint . features [ i ] . geometry . coordinates [ 0 ] , MapPoint . features [ i ] . geometry . coordinates [ 1 ] ) , / / 指 定 文 本 标 注 所 在 的 地 理 位 置
offset : new BMap . Size ( - 30 , - 30 ) / / 设 置 文 本 偏 移 量
} ;
/ / 创 建 文 本 标 注 对 象
var label1 = new BMap . Label ( MapPoint . features [ i ] . properties . name , opts ) ;
/ / 自 定 义 文 本 标 注 样 式
label1 . setStyle ( {
color : 'orange' ,
borderRadius : '5px' ,
borderColor : '#ccc' ,
padding : '10px' ,
fontSize : '16px' ,
height : '20px' ,
lineHeight : '20px' ,
backgroundColor : 'rgba(0,0,0,0)' ,
border : '0' ,
fontFamily : '微软雅黑'
} ) ;
map . addOverlay ( label1 ) ;
}
}
} ,
} ,
}
}
@ -180,7 +226,7 @@ export default {
. bmap { . bmap {
width : 100 % ;
width : 100 % ;
height : 100 % ;
height : 100 % ;
border : 1 px solid # 000 ;
border : 1 px solid # 000 000 ;
} }
@ -191,7 +237,6 @@ export default {
height : 20 px ;
height : 20 px ;
position : absolute ;
position : absolute ;
left : 49 % ;
left : 49 % ;
bottom : 30 px ;
bottom : 30 px ;
display : flex ;
display : flex ;
justify - content : center ;
justify - content : center ;
