https://www.eastcoast-nsa.gov.tw/_next/static/chunks/pages/attractions/map-ba8b57af5b8c7700.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8945],{18065:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var s=n(37876);let l=n(14232).memo(({score:e,className:t})=>(0,s.jsxs)("div",{className:`${t} d-flex align-items-center fz-13px op-80 bg-white px-6px rounded-lg text-dark`,children:[(0,s.jsx)("img",{src:"/images/attraction/google-transparent.png",alt:"",className:"w-12px h-12px mr-2px"}),e,(0,s.jsx)("i",{className:"icon icon-star text-star fz-12px ml-2px"})]}))},53567:(e,t,n)=>{"use strict";n.d(t,{A:()=>x});var s=n(37876),l=n(14232),a=n(77328),r=n.n(a),i=n(89099),c=n(62867),o=n(75752),d=n(6065),m=n(90658);let x=l.memo(({title:e="東部海岸國家風景區觀光資訊網",description:t="",images:n,url:l})=>{let{asPath:a}=(0,i.useRouter)(),x=(0,m.Ym)(),u=(0,d.Tl)("東部海岸國家風景區觀光資訊網",x);return t=t?(0,o.BM)(t).replace(/\n/g,"").replace(/\r/g,"").replace(/ /g,"").replace(/ /g,"").trim().substring(0,150):"在這裡，我們將與你分享東海岸最即時的活動快報、最美麗的景色照片。",n=n?.length?n:[{url:"https://www.eastcoast-nsa.gov.tw/images/global/social-share.jpg"}],e=e.trim().includes(u)?e:`${e}－${u}`,(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.bV,{title:e,description:t,keyword:"東部海岸,國家風景區,花蓮,臺東,台東,綠島,部落,部落觀光,觀光,都歷,東部旅遊,旅遊網,台灣好行,泛舟,迎曙光,潛水,景點",openGraph:{title:e,site_name:u,type:"website",url:l||`https://www.eastcoast-nsa.gov.tw/${x}${a.split("?")[0]}`,images:n}}),(0,s.jsxs)(r(),{children:[(0,s.jsx)("meta",{name:"DC.Title",content:e}),(0,s.jsx)("meta",{name:"DC.Subject",content:e}),(0,s.jsx)("meta",{name:"DC.Creator",content:u}),(0,s.jsx)("meta",{name:"DC.Description",content:t}),(0,s.jsx)("meta",{name:"DC.Publisher",content:u}),(0,s.jsx)("meta",{name:"DC.Contributor",content:u}),(0,s.jsx)("meta",{name:"DC.Date",content:(0,o.fU)(new Date)}),(0,s.jsx)("meta",{name:"DC.Type",content:"網站資訊"}),(0,s.jsx)("meta",{name:"DC.Identifier",content:"A15010100H"}),(0,s.jsx)("meta",{name:"DC.Source",content:u}),(0,s.jsx)("meta",{name:"DC.Language",content:x}),(0,s.jsx)("meta",{name:"DC.Rights",content:u}),(0,s.jsx)("meta",{name:"DC.Format",content:""}),(0,s.jsx)("meta",{name:"DC.Relation",content:""}),(0,s.jsx)("meta",{name:"DC.CategoryTheme",content:""}),(0,s.jsx)("meta",{name:"DC.CategoryCake",content:""}),(0,s.jsx)("meta",{name:"DC.CategoryService",content:""}),(0,s.jsx)("meta",{name:"DC.Keywords",content:""})]})]})})},59134:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/attractions/map",function(){return n(95464)}])},95464:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__N_SSP:()=>T,default:()=>_});var s=n(37876),l=n(14232),a=n(93174),r=n(39994),i=n(59023),c=n(81093),o=n(87259);let d=l.memo(({data:e,onClick:t})=>{let{name:n,cover:l,gg_place_rating:a,opentimeGoogle:r,opentime:i}=e;return(0,s.jsxs)("button",{className:"d-flex align-items-stretch w-100 h-12 p-1 text-left hover-bg-secondary-10",onClick:e=>{window.currentFocusTarget=e.currentTarget,t()},children:[(0,s.jsx)(o.A,{src:l,alt:"",ratio:"1by1",className:"w-10 flex-shrink-0",isRounded:!0}),(0,s.jsxs)("div",{className:"d-flex flex-column flex-fill px-1 py-4px miw-0",children:[(0,s.jsx)("div",{className:"fz-15px font-weight-bold lh-initial text-truncate",children:n}),a&&+a>0&&(0,s.jsxs)("div",{className:"d-flex align-items-center fz-13px",children:[(0,s.jsx)("i",{className:"icon icon-star mr-4px text-warning","aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:"google rating"}),a]}),(0,s.jsx)("div",{className:"fz-12px fz-xl-13px text-truncate",children:i||r?.[new Date().getDay()]})]})]})}),m=(0,l.forwardRef)(({data:e,onItemClick:t},n)=>{let l=(0,c.A)("(min-width: 992px)");return(0,s.jsx)(i.Ay,{children:({height:a,width:i})=>l?(0,s.jsx)(r.Y1,{height:a,itemCount:e.length,itemSize:96,width:i,ref:n,children:({index:n,style:l})=>{let a=e[n];return(0,s.jsx)("div",{className:"border-bottom",style:l,children:(0,s.jsx)(d,{data:a,onClick:()=>{t(a.uid)}})},a.id)}}):(0,s.jsx)(r.yi,{columnCount:e.length,columnWidth:240,height:96,rowCount:1,rowHeight:96,width:i,children:({columnIndex:n,rowIndex:l,style:a})=>{let r=e[n];return r?(0,s.jsx)("div",{className:"border-right",style:a,children:(0,s.jsx)(d,{data:r,onClick:()=>

1{t(r.uid)}})},r.id):null}})})}),x=l.memo(m);var u=n(60899),h=n(53567),p=n(6065),f=n(78944),g=n(90658),j=n(3690);let w=({children:e})=>e,b=l.memo(({data:e,currentSpotIdx:t,nearInfoData:n,onItemClick:a})=>{let r=(0,g.Ym)(),i=(0,l.useRef)(null),c=(0,l.useRef)(null),o=(0,l.useRef)(!1),d={lat:23.664003066007382,lng:121.08439493576248};return(0,l.useEffect)(()=>{if(!window.google?.maps||!i.current)return;let t=new google.maps.LatLngBounds;e.forEach(e=>t.extend(new google.maps.LatLng(e.lat,e.lng))),e.length?(i.current.fitBounds(t),1===e.length&&i.current.setZoom(15)):(i.current.setCenter(d),i.current.setZoom(7))},[e]),(0,l.useEffect)(()=>{if(c.current?.close(),!n||!window.google?.maps||!i.current)return;let{lat:s,lng:l}=e.find(e=>e.uid===t),a=new google.maps.LatLngBounds;a.extend(new google.maps.LatLng(s,l)),n.data.forEach(e=>a.extend(new google.maps.LatLng(e.lat,e.lng))),i.current.fitBounds(a)},[n]),(0,l.useEffect)(()=>{if(c.current?.close(),-1===t||o.current){o.current=!1;return}let{lat:n,lng:s}=e.find(e=>e.uid===t);i.current.setCenter({lat:n,lng:s})},[t]),(0,s.jsx)("div",{className:"google-map-wrapper w-100 flex-fill position-relative pointer-events-auto",children:(0,s.jsxs)(j.A,{apiKey:`AIzaSyB3WOsyjCx8e_kSNInOwYQ06Dx2RrIQ6n4&language=${r}`,locale:r,defaultCenter:d,defaultZoom:7,options:{mapTypeControl:!1,zoomControl:!1,streetViewControl:!1,clickableIcons:!1,gestureHandling:"greedy",fullscreenControl:!1,styles:[]},onGoogleApiLoaded:({map:e,maps:t})=>{i.current=e,c.current=new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-30)}),c.current.setZIndex(999999)},children:[e.map(({uid:e,type:t,lat:n,lng:l,name:r})=>(0,s.jsx)(w,{lat:n,lng:l,children:(0,s.jsxs)("button",{className:"spot-marker focus-hint",onClick:()=>{o.current=!0,a(e)},children:[(0,s.jsx)("img",{className:"d-block w-4",src:`/images/map/marker-${t}.png`,alt:""}),(0,s.jsx)("div",{className:"sr-only",children:r})]})},e)),-1!==t&&e.filter(e=>e.uid===t).map(e=>{let{uid:t,type:n,lat:l,lng:a,name:r}=e;return(0,s.jsx)(w,{lat:l,lng:a,children:(0,s.jsxs)("div",{className:"spot-marker act",children:[(0,s.jsx)("img",{className:"d-block w-5",src:"/images/map/marker-current.png",alt:"",style:{marginLeft:-4,marginTop:-9}}),(0,s.jsx)("div",{className:"sr-only",children:r})]})},t)}),n&&n.data.map((e,t)=>{let l=n.type,{name:a,lat:r,lng:o,current_business_hours:d,extra_info:m}=e;return(0,s.jsx)(w,{lat:r,lng:o,children:(0,s.jsxs)("button",{className:"position-relative w-0 h-0 focus-hint-group",onClick:()=>{let t=document.createElement("div");f.createRoot(t).render((0,s.jsxs)("div",{className:"d-flex align-items-center bg-white rounded",children:[(0,s.jsx)("i",{className:`icon icon-${l} w-5 h-5 flex-shrink-0 bg-primary text-white fz-22px rounded-circle`,"aria-hidden":"true"}),(0,s.jsxs)("div",{className:"pl-1 font-weight-bold",children:[(0,s.jsx)("div",{className:"d-flex align-items-center mb-2px fz-16px mih-20px",children:a}),m?.total_lots&&(0,s.jsxs)("div",{className:"d-flex align-items-center h-20px fz-14px text-main",children:["總車位數：",m.total_lots]}),d&&(0,s.jsx)("div",{className:"d-flex align-items-center h-20px fz-14px text-success",children:d})]}),(0,s.jsx)("a",{className:"btn w-5 h-5 rounded text-decoration-none ml-1 font-weight-bold text-primary fz-15px",href:`http://maps.google.com/maps?daddr=${r},${o}&hl=zh-tw`,title:"導航(另開視窗)",target:"_blank",rel:"noopener noreferrer",children:"GO"})]})),c.current.setContent(t),c.current.setOptions({pixelOffset:new google.maps.Size(0,0)}),c.current.setPosition({lat:e.lat,lng:e.lng}),c.current.open(i.current)},children:[(0,s.jsx)("i",{className:`icon icon-${l} w-4 h-4 btn btn-primary absolute-center rounded-circle focus-hint hint-outside`,"aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:a})]})},t)})]})})});var N=n(18065),y=n(95077);let v=l.memo(({data:e,searchNearInfo:t,nearInfoData:n,onClose:a})=>{let{id:r,name:i,cover:c,googleScore:d,zipcode:m,address:x,tel:u}=e,[h,f]=(0,l.useState)(!1),j=(0,g.Ym)(),w="zh-tw"===j,b=(0,l.useRef)();return(0,l.useEffect)(()=>{f(n)},[n]),(0,l.useEffect)(()=>{f(!1)},[e]),(0,l.useEffect)(()=>{e&&b.current&&b.current.focus()},[e]),(0,s.jsx)("div",{className:"absolute-top-left w-100 w-md-320px px-3 p-md-0 z-99999 mt-3 mt-md-5 ml-md-5",children:(0,s.jsxs)("div",{className:`${h?"h-8":""} w-100 p-2 bg-white rounded-lg shadow position-relative overflow-hidden`,children:[(0,s.jsxs)("div",{className:`${h?"mb-2":""} d-flex align-items-center justify-content-between`,children:[(0,s.jsx)("div",{className:"font-weight-bold fz-18px text-truncate",children:i}),(0,s.jsxs)("div",{className:"d-flex",children:[w&&(0,s.jsxs)("button",{className:"btn w-4 h-4 mr-1 border-0 rounded",onClick:()=>f(!h),children:[(0,s.jsx)("i",{className:`icon icon-${h?"expand":"shrink"} fz-17px`,"aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:"縮小/放大視窗"})]}),(0,s.jsxs)("button",{className:"btn w-4 h-4 border-0 rounded",onClick:()=>

1{window.currentFocusTarget&&(window.currentFocusTarget.focus(),window.currentFocusTarget=null),a()},ref:b,children:[(0,s.jsx)("i",{className:"icon icon-close","aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:(0,s.jsx)(p.Ay,{children:"關閉"})})]})]})]}),d&&!!+d&&(0,s.jsx)(N.A,{score:d}),(0,s.jsx)("div",{className:"mt-1 mx-n2",children:(0,s.jsx)(o.A,{src:c.replace("150x150","480x360"),alt:i,ratio:"4by3",className:"d-none d-md-block"})}),w&&(0,s.jsx)("ul",{className:"d-flex mt-12px pb-10px border-bottom",children:y.YY.map(n=>(0,s.jsx)("li",{className:"d-flex mr-1 mr-0-last",children:(0,s.jsxs)("button",{className:"btn w-5 h-5 p-0 btn-primary rounded-circle overflow-hidden position-relative",title:(0,p.Tl)(n.title,j),onClick:()=>{t({data:e,type:n.type,zipcode:m})},children:[(0,s.jsx)("i",{className:`icon icon-${n.type} fz-${n.size}px absolute-center`,"aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:n.title})]})},n.type))}),x&&(0,s.jsxs)("div",{className:"d-flex align-items-center mt-12px fz-13px lh-initial text-info",children:[(0,s.jsx)("i",{className:"icon icon-location w-2 fz-15px mr-4px","aria-hidden":"true"}),(0,s.jsx)("div",{className:"text-truncate",children:x})]}),w&&u&&(0,s.jsxs)("div",{className:"d-flex align-items-center mt-12px fz-13px text-info",children:[(0,s.jsx)("i",{className:"icon icon-tel w-2 mr-4px","aria-hidden":"true"}),u]}),(0,s.jsx)("div",{className:"d-flex mt-2",children:(0,s.jsxs)("a",{className:"btn btn-default w-100 h-5 rounded",href:`/${j}/attractions/detail/${r}`,title:`${i}(${(0,p.Tl)("另開視窗",j)})`,target:"_blank",rel:"noopener noreferrer",children:[(0,s.jsx)(p.Ay,{children:"詳細內容"}),(0,s.jsx)("i",{className:"icon icon-arrow-right ml-4px fz-13px","aria-hidden":"true"})]})})]})})});var C=n(75752);let k=l.memo(({isShow:e,data:t,region:n,currentZipcode:a,keyword:r,className:i,onClose:c,onSubmit:o})=>{let d=(0,l.useRef)(),[m,x]=(0,l.useState)(a),[u,h]=(0,l.useState)(t),f=(0,g.Ym)(),j="en"===f;(0,l.useEffect)(()=>{h((0,C.nd)(t,{keyword:r,zipcode:m}))},[t,r,m]);let w=()=>{!matchMedia("(min-width: 1200px)").matches||d.current.matches(":focus-within")||(document.querySelector("#btn-map-adv-search").focus(),c())};return(0,l.useEffect)(()=>{e&&document.querySelector("#btn-map-close").focus()},[e]),(0,l.useEffect)(()=>{document.addEventListener("keyup",e=>{27===(e.which?e.which:e.keyCode)&&(c(),d.current?.contains(e.target)&&document.querySelector("#btn-map-adv-search").focus())})},[]),(0,s.jsxs)("div",{className:`${e?"":"pointer-events-none"} d-flex align-items-end justify-content-lg-center align-items-lg-center pt-7 pt-xl-13 w-100 h-100 trs-all ${i}`,ref:d,children:[(0,s.jsxs)("div",{className:`${e?"":"translate-y-100 op-0"} map-advance-panel d-flex flex-column w-100 position-relative z-100 bg-white rounded-lg-top trs-all`,children:[(0,s.jsxs)("button",{className:"btn btn-ghost w-5 h-5 mt-2 mr-2 flex-shrink-0 rounded z-100 absolute-top-right",id:"btn-map-close",onClick:()=>{c(),x(a),document.querySelector("#btn-map-adv-search").focus()},onBlur:w,children:[(0,s.jsx)("i",{className:"icon icon-close","aria-hidden":"true"}),(0,s.jsx)("div",{className:"sr-only",children:"關閉"})]}),(0,s.jsxs)("div",{className:"scroll-blk flex-fill w-100 px-2 py-3",id:"map-adv-search-panel",children:[(0,s.jsx)("div",{className:"mb-2 fz-18px font-weight-bold",children:(0,s.jsx)(p.Ay,{children:"行政區"})}),(0,s.jsx)("ul",{className:"row g-1",children:n.map(e=>(0,s.jsx)("li",{className:`col-3 ${j?"":"col-md-2"}`,children:(0,s.jsx)("button",{className:`${m.includes(+e.zipcode)?"btn-primary":""} btn w-100 h-5 px-1 rounded`,onClick:()=>{m.includes(+e.zipcode)?x(m.filter(t=>t!==+e.zipcode)):x([...m,+e.zipcode])},children:e.name})},e.id))})]}),(0,s.jsxs)("div",{className:"d-flex justify-content-between justify-content-md-end flex-shrink-0 p-2 border-top bg-white",children:[(0,s.jsx)("button",{className:"btn border-0 px-3 mr-2 rounded",onClick:()=>{x([])},children:(0,s.jsx)(p.Ay,{children:"清除"})}),(0,s.jsx)("button",{className:"btn btn-primary h-5 px-5 rounded",onClick:()=>{o(m),c()},onBlur:w,children:u.length?(0,p.Tl)("共有 {0} 筆結果",f,[u.length]):(0,s.jsx)(p.Ay,{children:"暫無資料"})})]})]}),(0,s.jsx)("div",{className:`${e?"":"op-0"} fill-parent bg-black-50 trs-all`,onClick:()=>{c(),x(a)}})]})});var z=n(19716),$=n.n(z),S=n(21689),D=n(3147);let A={attraction:1,shop:2};var T=!0;let _=l.memo(({title:e,locale:t})=>{let n=(0,c.A)("(min-width: 992px)"),{toggleLoading:r}=(0,l.useContext)(D.Y),[i,o]=(0,l.useState)(null),[d,m]=(0,l.useState)(""),[f,g]=(0,l.useState)([]),[j,w]=(0,l.useState)(!1),[N,z]=(0,l.useState)(null),[T,_]=(0,l.useState)(null),[E,I]=(0,l.useState)(-1),[L,R]=(0,l.useState)([1]),Y=(0,S.yz)({lang:t}),F=(0,l.useCallback)(e=>{_(null),I(e)},[]),O=async({type:e,data:t})=>{let{lat:n,lng:s}=t,{title:l,range:a,api:i}=y.YY.find(t=>t.type===e);r(!0),"parking"===e||("bus-stop"===e&&(i=`${i}?lang=zh-tw&lat=${n}&lng=${s}

1&radius=${a}`),fetch(i,{method:"POST",headers:{"X-Requested-With":"XMLHttpRequest"}}).then(e=>e.json()).then(({data:t})=>{"bus-stop"===e&&(t=t.map(({stop_name:e,latitude:t,longitude:n})=>({name:e,lat:t,lng:n})));let i=t.filter(e=>Math.floor(1e3*(0,C.Io)(n,s,e.lat,e.lng))/1e3<=a);0===i.length?($()(`週邊沒有${l}資訊`,{buttons:!1,timer:1200}),_(null)):_({data:i,type:e}),r(!1)}).catch(console.error))};return((0,l.useEffect)(()=>{Y&&o({category:Y?.category,zipcode:Y?.zipcode,data:[...Y?.data].filter(e=>e.lat&&e.lng).map(e=>({...e,uid:`${e.type}-${e.id}`,typeId:A[e.type]}))})},[Y]),(0,l.useEffect)(()=>{if(i){_(null),I(-1);let e=i.data;L.length&&(e=e.filter(e=>L.includes(e.typeId))),z((0,C.nd)(e,{keyword:d,zipcode:f}))}},[i,d,f,L]),N)?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(h.A,{title:`${(0,p.Tl)(e,t)}`}),(0,s.jsx)("style",{children:`
2                .footer-wrapper,
3                .float-bottom-blk {
4                    display: none !important;
5                }
6            `}),(0,s.jsx)("div",{className:"d-flex fixed-top w-100 h-100 pt-7 pt-xl-13 z-100",children:(0,s.jsxs)("div",{className:"d-flex flex-column flex-md-wrap align-content-stretch flex-fill flex-shrink-0 position-relative z-200",children:[(0,s.jsxs)("div",{className:"d-flex m-1 rounded  border-primary-focus-within trs-all",children:[(0,s.jsxs)("div",{className:"d-flex flex-fill align-items-center position-relative z-100",children:[(0,s.jsx)("label",{className:"sr-only",htmlFor:"keyword",children:"關鍵字"}),(0,s.jsx)(a.A,{className:"ipt ipt-keyword px-12px rounded",type:"search",placeholder:(0,p.Tl)("請輸入關鍵字",t),value:d,onInputChange:e=>{m(e.target.value)},id:"keyword"}),(0,s.jsx)("div",{className:"ipt-focus-show d-flex d-lg-none align-items-center h-5 pr-5 absolute-top-right pointer-events-none text-info fz-13px trs-all",children:N.length?(0,p.Tl)("共有 {0} 筆結果",t,[N.length]):(0,s.jsx)(p.Ay,{children:"暫無資料"})})]}),(0,s.jsxs)("button",{className:"btn btn-primary flex-shrink-0 text-white h-5 ml-1 px-20px rounded trs-all position-relative",type:"button",onClick:()=>{w(!0)},id:"btn-map-adv-search",children:[(0,s.jsx)("i",{className:"icon icon-adv","aria-hidden":"true"}),(0,s.jsx)("span",{className:"sr-only",children:(0,s.jsx)(p.Ay,{children:"進階搜尋"})}),!!f.length&&(0,s.jsx)("div",{className:"w-6px h-6px mt-6px mr-10px bg-danger absolute-top-right rounded-circle"})]})]}),(0,s.jsx)("div",{className:"order-last order-lg-0 w-lg-320px px-1 py-lg-4px mt-auto mt-lg-0 fz-13px bg-white border-top border-bottom",children:N.length?(0,p.Tl)("共有 {0} 筆結果",t,[N.length]):(0,s.jsx)(p.Ay,{children:"暫無資料"})}),(0,s.jsx)("div",{className:"order-last order-lg-0 flex-shrink-0 flex-lg-fill h-12 w-lg-320px bg-white",children:N&&(0,s.jsx)(x,{data:N,onItemClick:F})}),i&&(0,s.jsx)(k,{isShow:j,data:i.data,keyword:d,region:i.zipcode,currentZipcode:f,onSubmit:e=>{g(e)},onClose:()=>{w(!1)},className:"fixed-bottom"}),(0,s.jsxs)("div",{className:`${n?"h-100 w-lg-calc-n320px":"w-100"} d-flex flex-fill flex-column py-lg-0 position-relative order-lg-last`,children:[-1!==E&&(0,s.jsx)(v,{data:N.find(e=>e.uid===E),nearInfoData:T,categoryData:i.category,searchNearInfo:O,onClose:()=>{_(null),I(-1)}}),N&&(0,s.jsx)(b,{data:N,nearInfoData:T,currentSpotIdx:E,onItemClick:F})]})]})})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(h.A,{title:`${(0,p.Tl)(e,t)}`}),(0,s.jsx)("div",{className:"fill-parent d-flex justify-content-center align-items-center",children:(0,s.jsx)(u.A,{size:20})})]})})}},e=>{e.O(0,[2867,9716,3690,3999,636,6593,8792],()=>e(e.s=59134)),_N_E=e.O()}]);