{"id":26,"date":"2021-10-27T15:58:05","date_gmt":"2021-10-27T07:58:05","guid":{"rendered":"https:\/\/kcdhc.org.hk\/express\/?page_id=26"},"modified":"2022-06-28T11:49:40","modified_gmt":"2022-06-28T03:49:40","slug":"%e8%81%af%e7%b5%a1%e6%96%b9%e6%b3%95","status":"publish","type":"page","link":"https:\/\/kcdhc.org.hk\/express\/%e8%81%af%e7%b5%a1%e6%96%b9%e6%b3%95\/","title":{"rendered":"\u806f\u7d61\u65b9\u6cd5"},"content":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1636622603369{padding-top: 50px !important;padding-bottom: 50px !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2>\u806f\u7d61\u65b9\u6cd5<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;15px&#8221;][vc_empty_space height=&#8221;15px&#8221;][vc_column_text]\n<div class=\"row\">\n\n    <div class=\"col-md-6\">\n\n        <div class=\"widget-filter\">\n            <div class=\"row\">\n                <div class=\"col-xs-7 col-md-6 mb-2\">\n                    <select id=\"sel_store_type\" class=\"form-control\">\n                        <option value='1'>\u5eb7\u5065\u7ad9<\/option>                    <\/select>\n                <\/div>\n                <div class=\"col-xs-5 col-md-6 mb-2\">\n                    <select id=\"sel_location\" class=\"form-control\">\n                        <option value=''>\u5730\u5340><\/option>\n                                            <\/select>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"store-list-container\">\n                                <div class=\"store-item card mb-2 core\" attr-type=\"1\" attr-location=\"1\" attr-lat=\"22.315866\" attr-lng=\"114.191374\">\n\n                        <h4 class=\"store-name\">\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u4e3b\u4e2d\u5fc3<\/h4>\n                                                    <div class=\"store-address\">\n                                <img decoding=\"async\" src=\"https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker2.png\" width=\"24\" class=\"store-icon\"  \/>                                \u571f\u74dc\u7063\u65ed\u65e5\u88579\u865f\u6e2f\u5716\u7063\u5730\u4e0b                            <\/div>\n                            \n                                                    <div class=\"store-office-hour\">\n                                <i class=\"fa fa-clock\"><\/i>\n                                <p class=\"d-inline-block\">\u661f\u671f\u4e00\u3001\u4e09\u3001\u4e94\u3001\u516d :\u4e0a\u534810\u6642\u81f3\u4e0b\u53487\u6642<br \/>\r\n\u661f\u671f\u4e8c\u3001\u56db: \u4e0a\u534810\u6642\u81f3\u4e0b\u53489\u6642<br \/>\r\n\u661f\u671f\u65e5: \u4e0a\u534810\u6642\u81f3\u4e0b\u53482\u6642<br \/>\r\n\u516c\u773e\u5047\u671f\u4f11\u606f<br \/>\r\n<\/p>\n                            <\/div>\n                            \n\t\t\t\t\t\t                            <div class=\"store-email\">\n                                <i class=\"fa fa-envelope\"><\/i>\n                                <p class=\"d-inline-block\"><a href=\"mailto:kcdhce@loksintong.org\">kcdhce@loksintong.org<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n                                                    <div class=\"store-tel\">\n                                <i class=\"fa fa-map-marker\"><\/i>\n                                <p class=\"d-inline-block\"><a href='tel:+85223383211'>+852 2338 3211<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n\t\t\t\t\t\t                            <div class=\"store-fax\">\n                                <i class=\"fa fa-print\"><\/i>\n                                <p class=\"d-inline-block\">+852 2338 3694<\/p>\n                            <\/div>\n                                                <\/div>\n\n                                        <div class=\"store-item card mb-2 \" attr-type=\"1\" attr-location=\"1\" attr-lat=\"22.3101038\" attr-lng=\"114.1874197\">\n\n                        <h4 class=\"store-name\">\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede1\t<\/h4>\n                                                    <div class=\"store-address\">\n                                <img decoding=\"async\" src=\"https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png\" width=\"24\" class=\"store-icon\"  \/>                                \u4e5d\u9f8d\u7d05\u78e1\u99ac\u982d\u570d\u9053100\u865f\u91d1\u901a\u5546\u696d\u5927\u5ec810\u6a13A\u53caB\u5ba4                            <\/div>\n                            \n                                                    <div class=\"store-office-hour\">\n                                <i class=\"fa fa-clock\"><\/i>\n                                <p class=\"d-inline-block\">\u661f\u671f\u4e8c\u3001\u4e09\u3001\u4e94: \u4e0a\u53489\u6642\u81f3\u4e0b\u53481\u6642 \/ \u4e0b\u53482\u6642\u81f3\u4e0b\u53486\u6642<\/p>\n                            <\/div>\n                            \n\t\t\t\t\t\t\t\t\t\t\t\t\n                                                    <div class=\"store-tel\">\n                                <i class=\"fa fa-map-marker\"><\/i>\n                                <p class=\"d-inline-block\"><a href='tel:+85223383144'>+852 2338 3144<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n\t\t\t\t\t\t                    <\/div>\n\n                                        <div class=\"store-item card mb-2 \" attr-type=\"1\" attr-location=\"1\" attr-lat=\"22.329327\" attr-lng=\"114.187187\">\n\n                        <h4 class=\"store-name\">\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede2<\/h4>\n                                                    <div class=\"store-address\">\n                                <img decoding=\"async\" src=\"https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png\" width=\"24\" class=\"store-icon\"  \/>                                \u4e5d\u9f8d\u57ce\u806f\u5408\u905348\u865f\u5730\u4e0b                            <\/div>\n                            \n                                                    <div class=\"store-office-hour\">\n                                <i class=\"fa fa-clock\"><\/i>\n                                <p class=\"d-inline-block\">\u661f\u671f\u4e00\u3001\u56db: \u4e0a\u53489\u6642\u81f3\u4e0b\u53486\u6642<\/p>\n                            <\/div>\n                            \n\t\t\t\t\t\t\t\t\t\t\t\t\n                                                    <div class=\"store-tel\">\n                                <i class=\"fa fa-map-marker\"><\/i>\n                                <p class=\"d-inline-block\"><a href='tel:+85254628023'>+852 5462 8023<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n\t\t\t\t\t\t                    <\/div>\n\n                                        <div class=\"store-item card mb-2 \" attr-type=\"1\" attr-location=\"1\" attr-lat=\"22.3295265\" attr-lng=\"114.191335\">\n\n                        <h4 class=\"store-name\">\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede3<\/h4>\n                                                    <div class=\"store-address\">\n                                <img decoding=\"async\" src=\"https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png\" width=\"24\" class=\"store-icon\"  \/>                                \u4e5d\u9f8d\u57ce\u6253\u9f13\u5dba\u905347\u865f\u5730\u4e0b                            <\/div>\n                            \n                                                    <div class=\"store-office-hour\">\n                                <i class=\"fa fa-clock\"><\/i>\n                                <p class=\"d-inline-block\">\u661f\u671f\u4e09: \u4e0b\u53482\u6642\u81f3\u4e0b\u53486\u6642<\/p>\n                            <\/div>\n                            \n\t\t\t\t\t\t\t\t\t\t\t\t\n                                                    <div class=\"store-tel\">\n                                <i class=\"fa fa-map-marker\"><\/i>\n                                <p class=\"d-inline-block\"><a href='tel:+85253318362'>+852 5331 8362<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n\t\t\t\t\t\t                    <\/div>\n\n                                        <div class=\"store-item card mb-2 \" attr-type=\"1\" attr-location=\"1\" attr-lat=\"22.3301868\" attr-lng=\"114.1902613\">\n\n                        <h4 class=\"store-name\">\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede4<\/h4>\n                                                    <div class=\"store-address\">\n                                <img decoding=\"async\" src=\"https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png\" width=\"24\" class=\"store-icon\"  \/>                                \u4e5d\u9f8d\u57ce\u9f8d\u5d17\u905363\u865f                            <\/div>\n                            \n                                                    <div class=\"store-office-hour\">\n                                <i class=\"fa fa-clock\"><\/i>\n                                <p class=\"d-inline-block\">\u661f\u671f\u4e09: \u4e0a\u534810\u6642\u81f3\u4e0b\u53482\u6642<\/p>\n                            <\/div>\n                            \n\t\t\t\t\t\t\t\t\t\t\t\t\n                                                    <div class=\"store-tel\">\n                                <i class=\"fa fa-map-marker\"><\/i>\n                                <p class=\"d-inline-block\"><a href='tel:+85264032511'>+852 6403 2511<\/a><\/p>\n                            <\/div>\n                            \t\t\t\t\t\t\n\t\t\t\t\t\t                    <\/div>\n\n                            <\/div>\n\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"store-list-container\"><\/div>\n            <\/div>\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"col-md-6\" id=\"google-map-container\">\n        <div id=\"google-map\"><\/div>\n    <\/div>\n\n<\/div>\n\n<script type=\"text\/javascript\" src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBSfrVz_jjtZBCG36F0xmpMPzbHl5Mtc4k\"><\/script>\n\n<script type=\"text\/javascript\">\n\n    jQuery(document).ready(function( $ ) {\n\n        const hongKongBounds = {\n            north: 22.56, \/\/ \u6771\u5317\u89d2\u7def\u5ea6\n            south: 22.15, \/\/ \u897f\u5357\u89d2\u7def\u5ea6\n            west: 113.83, \/\/ \u897f\u5357\u89d2\u7d93\u5ea6\n            east: 114.44, \/\/ \u6771\u5317\u89d2\u7d93\u5ea6\n        };\n\n        var map, infowindow, marker, i, lat, lng;\n        var locations = [['\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u4e3b\u4e2d\u5fc3', 22.315866, 114.191374, 1, 'https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker2.png'],['\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede1\t', 22.3101038, 114.1874197, 1, 'https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png'],['\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede2', 22.329327, 114.187187, 1, 'https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png'],['\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede3', 22.3295265, 114.191335, 1, 'https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png'],['\u4e5d\u9f8d\u57ce\u5730\u5340\u5eb7\u5065\u7ad9 \u2013 \u670d\u52d9\u9ede4', 22.3301868, 114.1902613, 1, 'https:\/\/kcdhc.org.hk\/express\/wp-content\/uploads\/2021\/11\/marker1.png']];\n\n        var centre_location = {\"1\":{\"name\":\"\\u9999\\u6e2f\",\"locations\":[{\"1\":\"\\u4e5d\\u9f8d\\u57ce\"}]}};\n        var sales_location = [];\n        var office_location = [];\n\n\n\n        function InitMap() {\n            map = new google.maps.Map(document.getElementById('google-map'), {\n                zoom: 13,\n                center: new google.maps.LatLng(22.313070, 114.170856),\n                mapTypeId: google.maps.MapTypeId.ROADMAP,\n                styles: [\n                  {\n                    featureType: \"water\", \/\/ \u91dd\u5c0d\u6c34\u57df\u7279\u5fb5\n                    elementType: \"labels\", \/\/ \u91dd\u5c0d\u6a19\u7c64\n                    stylers: [\n                      { visibility: \"off\" } \/\/ \u96b1\u85cf\u6a19\u7c64\n                    ]\n                  }\n                ],\n                restriction: {\n                    latLngBounds: hongKongBounds, \/\/ \u9650\u5236\u5730\u5716\u7bc4\u570d\n                    strictBounds: true, \/\/ \u56b4\u683c\u9650\u5236\uff0c\u9632\u6b62\u62d6\u52d5\u5230\u7bc4\u570d\u5916\n                },\n            });\n            infowindow = new google.maps.InfoWindow();\n            for (i = 0; i < locations.length; i++) {\n                marker = new google.maps.Marker({\n                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),\n                    map: map,\n                    icon : locations[i][4]\n                });\n                google.maps.event.addListener(marker, 'click', (function (marker, i) {\n                    return function () {\n                        infowindow.setContent(locations[i][0]);\n                        infowindow.open(map, marker);\n                    }\n                })(marker, i));\n            }\n        }\n\n\n        function sortStore()\n        {\n            var type_id = $(\"#sel_store_type\").val();\n            var location_id = $(\"#sel_location\").val();\n\n            $(\".store-item\").addClass('hide');\n            console.log('type_id : ' + type_id +  '; location_id : ' + location_id );\n            if (type_id && location_id )\n            {\n                $(\".store-item[attr-type='\"+type_id+\"'][attr-location='\"+location_id+\"']\").removeClass('hide');\n            }else{\n                $(\".store-item[attr-type='\"+type_id+\"']\").removeClass('hide');\n            }\n        }\n\n        function getStoreLocation()\n        {\n            $.ajax({\n                type: \"POST\",\n                url: \"\/wp-admin\/admin-ajax.php\",\n                data: {\n                    action: \"get_store_locations\",\n                    type_id: $(\"#sel_store_type\").val(),\n                },\n                success: function (response) {\n                    console.log(response);\n                    $(\"#sel_location\").empty();\n                    $(\"#sel_location\").append(\"<option value=''>\u8acb\u9078\u64c7<\/option>\");\n                    for ($i = 0; $i < response.length; $i++)\n                    {\n                        $_option = '';\n                        $locations = response[$i]['locations'];\n                        for ($j = 0; $j < $locations.length; $j++)\n                        {\n                            $_option += \"<option value='\"+ $locations[$j]['id'] +\"'>\"+ $locations[$j]['name'] +\"<\/option>\";\n                        }\n                        $(\"#sel_location\").append(\"<optgroup label='\"+ response[$i]['name']+\"'>\"+ $_option +\"<\/optgroup>\");\n                    }\n                },\n                complete: function(){\n                    $(\"#sel_location\").attr('disabled', false);\n                },\n                beforeSend: function(){\n                    $(\"#sel_location\").attr('disabled', true);\n                },\n            });\n        }\n\n        $(\"#sel_store_type\").change(function(){\n            $(\"#sel_location\").val('');\n            sortStore();\n            getStoreLocation();\n        });\n\n        $(\"#sel_location\").change(function(){\n            sortStore();\n        });\n\n\n\n\n\n\n        $(\".store-item\").click(function(){\n            lat = parseFloat($(this).attr('attr-lat'));\n            lng = parseFloat($(this).attr('attr-lng'));\n\n            map.setZoom(18);      \/\/ This will trigger a zoom_changed on the map\n            map.setCenter(new google.maps.LatLng( lat, lng ));\n            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);\n\n            if ( $( window ).width() <= 991)\n            {\n                $(\"#google-map\").detach().appendTo($(this));\n            }\n        });\n\n        $(\".btn-show-map\").click(function(){\n            $(\"#google-map\").detach().appendTo($(this).closest('.store-item'));\n        });\n\n        $(window).resize(function(){\n            if ( $( window ).width() > 991)\n            {\n                $(\"#google-map\").detach().appendTo('#google-map-container');\n            }\n        });\n\n        InitMap();\n        getStoreLocation();\n        sortStore();\n\n\n\n    });\n\n\n<\/script>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1636622603369{padding-top [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":12,"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":1357,"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/pages\/26\/revisions\/1357"}],"wp:attachment":[{"href":"https:\/\/kcdhc.org.hk\/express\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}