@ -43,7 +43,8 @@
<!-- 详情弹框 -- >
< van -popup v -model = " detailShow " @close ="audioPause" : overlay -style = " { ' background -color ' : ' rgba ( 0 , 0 , 0 , 0 ) ' } "
position = "bottom" round >
< ProductDetail ref = "detailRef" :type ="productType" :info ="detailInfo" :audioSrc ="audioSrc" :genreType ="genreType" / >
< ProductDetail ref = "detailRef" :type ="productType" :info ="detailInfo" :audioSrc ="audioSrc"
: genreType = "genreType" / >
< / v a n - p o p u p >
<!-- 输入线路信息弹框 -- >
@ -67,27 +68,30 @@
<!-- 日期选择 -- >
< van -popup v-model ="lineDateShow" round position="bottom" >
< van -datetime -picker v -model = " currentDate " type = "date" title = "选择年月日" @confirm ="lineDateConfirm" @ cancel = "lineDateShow = false" / >
< van -datetime -picker v -model = " currentDate " type = "date" title = "选择年月日" @confirm ="lineDateConfirm"
@ cancel = "lineDateShow = false" / >
< / v a n - p o p u p >
<!-- 添加线路行程弹框 -- >
< van -popup v-model ="lineRouteShow" round position="bottom" >
< LineRoute :lineItem ="addLineInfo" ref = "lineRouteRef" / >
< LineRoute :lineItem ="addLineInfo" ref = "lineRouteRef" / >
< / v a n - p o p u p >
<!-- 线路详情弹框 -- >
< van -popup v -model = " lineDetailShow " :overlay ="false" : overlay -style = " { ' background -color ' : ' rgba ( 0 , 0 , 0 , 0 ) ' } " round
position = "bottom" @ close = "closeLine" class = "linePopup" >
< van -popup v -model = " lineDetailShow " :overlay ="false" : overlay -style = " { ' background -color ' : ' rgba ( 0 , 0 , 0 , 0 ) ' } "
round position = "bottom" @ close = "closeLine" class = "linePopup" >
< div class = "close-LineBtn" @click ="closeLine" >
退出线路
< / div >
< LineDetail @changeCenter ="changeMapCenter" / >
< LineDetail @changeCenter ="changeMapCenter" / >
< / v a n - p o p u p >
< / div >
< / template >
< script >
import { getStore } from '@/libs/storage'
import {
getStore
} from '@/libs/storage'
import moment from 'moment'
import ProductDetail from './compoents/productDetail'
import LineRoute from './compoents/lineRoute'
@ -126,14 +130,17 @@
audioSrc : '' ,
genreType : '' ,
isMyLine : false , / / 是 否 有 我 的 线 路
mapSrc : ''
} ;
} ,
mounted ( ) {
this . getAreaList ( )
if ( this . $route . query . token ) this . $store . commit ( 'changeUserInfo' , { token : this . $route . query . token } )
if ( this . $route . query . token ) this . $store . commit ( 'changeUserInfo' , {
token : this . $route . query . token
} )
/ / 如 果 从 我 的 行 程 里 点 击 添 加 线 路
if ( sessionStorage . getItem ( 'addUserLine' ) ) {
if ( sessionStorage . getItem ( 'addUserLine' ) ) {
this . lineName = ''
this . lineDate = ''
this . addLineShow = true
@ -141,7 +148,7 @@
}
} ,
activated ( ) {
} ,
methods : {
/ / 获 取 全 部 区 域
@ -173,6 +180,7 @@
this . basics . center_poi = JSON . parse ( this . basics . center_poi )
this . basics . lb_poi = JSON . parse ( this . basics . lb_poi )
this . basics . rt_poi = JSON . parse ( this . basics . rt_poi )
this . mapSrc = this . basics . tile_image_formatter
this . $nextTick ( ( ) => {
this . initMap ( )
} )
@ -196,12 +204,12 @@
} , '/api/emap/getSpotsByCategory' ) . then ( res => {
this . maps = res . data
this . lineAddStatus = false
/ / 如 果 是 从 线 路 列 表 过 来 的 ， 就 不 需 要 打 点 了
if ( this . $store . state . user . lineDetail && this . $store . state . user . lineDetail . points . length > 0 ) {
if ( this . $store . state . user . lineDetail && this . $store . state . user . lineDetail . points . length > 0 ) {
return ;
}
/ / 移 除 原 先 点 位
this . clearMarkers ( )
if ( this . maps . length > 0 ) this . setMarkers ( )
@ -212,10 +220,10 @@
this . post ( {
type : 1 ,
code : this . areaList [ this . areaIndex ] . code
} , '/api/emap/getLineByCode' ) . then ( res => {
if ( res . data && res . data . length > 0 ) {
} , '/api/emap/getLineByCode' ) . then ( res => {
if ( res . data && res . data . length > 0 ) {
this . isMyLine = true
} else {
} else {
this . isMyLine = false
}
} )
@ -235,12 +243,12 @@
minZoom : 10 ,
maxZoom : 15 ,
showControl : true , / / 是 否 显 示 地 图 上 的 控 件
viewMode : '2D' , / / 地 图 视 图 模 式 ， 支 持 2 D 和 3 D ， 默 认 为 3 D 。 2 D 模 式 下 俯 仰 角 和 旋 转 角 度 始 终 为 0
viewMode : '2D' , / / 地 图 视 图 模 式 ， 支 持 2 D 和 3 D ， 默 认 为 3 D 。 2 D 模 式 下 俯 仰 角 和 旋 转 角 度 始 终 为 0
rotatable : false , / / 禁 止 旋 转
rotation : 0 , / / 设 置 地 图 旋 转 角 度
pitchable : false , / / 禁 止 俯 视
baseMap : {
type : 'vector' , / / 矢 量 地 图 底 图 模 式
type : 'vector' , / / 矢 量 地 图 底 图 模 式
features : [
/ / ' b a s e ' , / / 路 面
/ / ' b u i l d i n g 3 d ' , / / 三 维 建 筑
@ -256,18 +264,12 @@
/ / 初 始 化 瓦 片
/ / 瓦 片 图 需 要 切 好 每 个 位 置 的 图
/ / x , y , z 为 上 图 的 坐 标
let imageTile = new TMap . ImageTileLayer ( {
getTileUrl : function ( x , y , z ) {
console . log ( x , y , z )
getTileUrl : ( x , y , z ) => {
/ / 拼 接 瓦 片 U R L
let url =
` https://static.ticket.sz-trip.com/yandu/images/yanduMap/ ` +
z +
"/" +
x +
"/" +
y +
".png" ;
let url = this . mapSrc + z + "/" + x +
"/" + y + ".png" ;
return url ;
} ,
tileSize : 256 , / / 瓦 片 像 素 尺 寸
@ -278,7 +280,7 @@
opacity : 1 , / / 图 层 透 明 度 ： 1 不 透 明 ， 0 为 全 透 明
map : this . mapObj , / / 设 置 图 层 显 示 到 哪 个 地 图 实 例 中
} ) ;
/ / 瓦 片 等 级 最 高 设 置
/ / t h i s . $ n e x t T i c k ( ( ) = > {
/ / v a r l a y e r I d = i m a g e T i l e . g e t I d ( ) / / 获 取 图 层 I D
@ -286,9 +288,9 @@
/ / / / T M a p . c o n s t a n t s . L A Y E R _ L E V E L 代 表 图 层 级 别 常 量 ， 见 帮 助 文 档 （ h t t p s : / / l b s . q q . c o m / w e b A p i / j a v a s c r i p t G L / g l D o c / d o c I n d e x M a p ）
/ / t h i s . m a p O b j . m o v e L a y e r ( l a y e r I d , T M a p . c o n s t a n t s . L A Y E R _ L E V E L . T E X T )
/ / } )
/ / 判 断 是 否 是 线 路 列 表 过 来 的
if ( this . $store . state . user . lineDetail && this . $store . state . user . lineDetail . points . length > 0 ) {
if ( this . $store . state . user . lineDetail && this . $store . state . user . lineDetail . points . length > 0 ) {
this . $nextTick ( ( ) => {
this . showLineDetail ( )
} )
@ -322,7 +324,8 @@
this . maps . forEach ( item => {
markers . push ( {
"styleId" : 'marker' ,
id : item . goods ? ( item . goods . genre == 'food' ? item . goods . id : item . goods . scenic_id ) : '' , / / 产 品 i d
id : item . goods ? ( item . goods . genre == 'food' ? item . goods . id : item . goods
. scenic_id ) : '' , / / 产 品 i d
genre : item . goods ? item . goods . genre : '' , / / 产 品 类 型
name : item . name , / / 产 品 名 称
address : item . address , / / 详 情 地 址
@ -425,29 +428,29 @@
} else {
this . audioSrc = evt . geometry . audioSrc
this . genreType = evt . geometry . genre
if ( [ 'ticket' , 'hotel' ] . includes ( evt . geometry . genre ) ) {
if ( [ 'ticket' , 'hotel' ] . includes ( evt . geometry . genre ) ) {
/ / 景 点 酒 店
this . get ( {
id : evt . geometry . id
} , '/api/scenic/getScenicById' ) . then ( res => {
if ( res . data ) {
} , '/api/scenic/getScenicById' ) . then ( res => {
if ( res . data ) {
this . productType = true
this . detailInfo = res . data
this . detailInfo . genre = evt . geometry . genre
this . detailShow = true
}
} )
} else if ( evt . geometry . genre == 'food' ) {
} else if ( evt . geometry . genre == 'food' ) {
this . get ( {
goods_id : evt . geometry . id
} , '/api/goods/getGoodDetail' ) . then ( res => {
if ( res . data ) {
} , '/api/goods/getGoodDetail' ) . then ( res => {
if ( res . data ) {
this . productType = true
this . detailInfo = res . data
this . detailShow = true
}
} )
} else {
} else {
/ / 停 车 场 卫 生 间 等
this . detailInfo = {
title : evt . geometry . name ,
@ -477,7 +480,7 @@
/ / 添 加 线 路
addLine ( ) {
this . $store . commit ( 'changeLineDetail' , { } )
if ( this . isMyLine ) {
if ( this . isMyLine ) {
/ / 已 有 我 的 行 程
this . $router . push ( {
path : '/lineList' ,
@ -486,7 +489,7 @@
type : '1'
}
} )
} else {
} else {
this . lineName = ''
this . lineDate = ''
this . addLineShow = true
@ -520,8 +523,8 @@
/ / 点 击 添 加 行 程 重 新 绘 制 热 点 , 只 展 示 景 点 酒 店 餐 饮 三 类
this . post ( {
code : this . areaList [ this . areaIndex ] . code ,
} , '/api/emap/getUserSpotsByCategory' ) . then ( res => {
if ( res . code == 1 ) {
} , '/api/emap/getUserSpotsByCategory' ) . then ( res => {
if ( res . code == 1 ) {
this . maps = res . data
/ / 添 加 行 程 时 为 t r u e
this . lineAddStatus = true
@ -530,7 +533,7 @@
/ / 移 除 原 先 点 位
this . clearMarkers ( )
if ( this . maps . length > 0 ) this . setMarkers ( )
/ / 点 击 添 加 行 程 更 换 m a r k e r 样 式
this . multiMarker . setStyles ( {
"marker" : new TMap . MarkerStyle ( {
@ -555,33 +558,34 @@
this . clearMarkers ( )
/ / 隐 藏 上 方 分 类
this . typeShow = false
this . lineDetailShow = true
let data = this . $store . state . user . lineDetail
let paths = [ ]
let labels = [ ]
data . points . forEach ( ( item , index ) => {
data . points . forEach ( ( item , index ) => {
paths . push (
new TMap . LatLng ( item . lonlat [ 1 ] , item . lonlat [ 0 ] )
)
labels . push ( {
id : 'label' , / / 点 图 形 数 据 的 标 志 信 息
styleId : 'label' , / / 样 式 i d
position : new TMap . LatLng ( item . lonlat [ 1 ] , item . lonlat [ 0 ] ) , / / 标 注 点 位 置
content : ( index == 0 ? '起' : ( index + 1 == data . points . length ? '终' : ( index + 1 ) . toString ( ) ) ) , / / 标 注 文 本
content : ( index == 0 ? '起' : ( index + 1 == data . points . length ? '终' : ( index + 1 )
. toString ( ) ) ) , / / 标 注 文 本
properties : {
/ / 标 注 点 的 属 性 数 据
title : 'label' ,
} ,
} )
} )
console . log ( 'paths' , paths )
console . log ( 'labels' , labels )
console . log ( 'paths' , paths )
console . log ( 'labels' , labels )
/ / 文 本 标 记
this . multiLabel = new TMap . MultiLabel ( {
id : 'label-layer' ,
@ -595,7 +599,7 @@
size : 16 , / / 文 字 大 小 属 性
offset : {
x : 0 ,
y : 0
y : 0
} , / / 文 字 偏 移 属 性 单 位 为 像 素
angle : 0 , / / 文 字 旋 转 属 性
alignment : 'center' , / / 文 字 水 平 对 齐 属 性
@ -609,7 +613,7 @@
} ,
geometries : labels ,
} )
/ / 线 路
this . MultiPolyline = new TMap . MultiPolyline ( {
id : 'polyline-layer' ,
@ -630,7 +634,7 @@
"paths" : paths
} ]
} )
setTimeout ( ( ) => {
this . $store . commit ( 'changeLineDetail' , { } )
} , 1000 )
@ -656,10 +660,10 @@
/ / c o n s o l e . l o g ( t o , f r o m )
/ / i f ( ) {
/ / n e x t ( v m = > {
/ / } )
/ / }
/ / }
} ;
< / script >
@ -813,10 +817,10 @@
}
}
}
. linePopup {
overflow : visible ;
. close - LineBtn {
width : 147 px ;
line - height : 67 px ;
chenkainan
1 year ago