from '@ionic/angular'; 6
+
7
+import { NearmePageRoutingModule } from './nearme-routing.module';
8
+
9
+import { NearmePage } from './nearme.page';
10
+
11
+@NgModule({
12
+  imports: [
13
+    CommonModule,
14
+    FormsModule,
15
+    IonicModule,
16
+    NearmePageRoutingModule
17
+  ],
18
+  declarations: [NearmePage]
19
+})
20
+export class NearmePageModule {}

+ 40 - 0
src/app/nearme/nearme.page.html

@@ -0,0 +1,40 @@
1
+<ion-header>
2
+  <ion-toolbar class="new-background-color">
3
+    <ion-buttons slot="start" color="light">
4
+      <ion-back-button></ion-back-button>
5
+    </ion-buttons>
6
+    <ion-title>Wellnewss Route</ion-title>
7
+  </ion-toolbar>
8
+</ion-header>
9
+
10
+<ion-content>
11
+  <ion-grid>
12
+    <ion-row>
13
+      <ion-col>
14
+        <div #nearmap id="nearmap"></div>
15
+      </ion-col>
16
+    </ion-row>
17
+    <ion-row >
18
+      <ion-col>
19
+        <ion-card *ngFor="let nearm of placenear">
20
+          <div *ngIf="nearm.better_featured_image != null">
21
+            <img src="{{nearm.better_featured_image.source_url}}" alt="">
22
+          </div>
23
+          <div *ngIf="nearm.better_featured_image == null">
24
+            <img src="/assets/images/temp.png" />
25
+          </div>
26
+          <ion-card-header>            
27
+            <a [routerLink]="['/tabs/place/', nearm.id]"><ion-card-title [innerHTML]="nearm.title.rendered"></ion-card-title>
28
+            </a>
29
+            <a [routerLink]="['/tabs/province/']">
30
+              <span [innerHTML]="nearm._embedded['wp:term'][1][0].name"></span>
31
+            </a> /
32
+            <a [routerLink]="['/tabs/place/']">
33
+              <span [innerHTML]="nearm._embedded['wp:term'][2][0].name"></span>
34
+            </a>
35
+          </ion-card-header>
36
+        </ion-card>
37
+      </ion-col>
38
+    </ion-row>
39
+  </ion-grid>
40
+</ion-content>

+ 9 - 0
src/app/nearme/nearme.page.scss

@@ -0,0 +1,9 @@
1
+ion-card-title {
2
+    font-family: "IBM Plex Sans Thai", sans-serif !important;
3
+    font-weight: 600;
4
+    font-size: 20px;
5
+  }
6
+  
7
+  #nearmap {
8
+    height: 300px;
9
+}

+ 24 - 0
src/app/nearme/nearme.page.spec.ts

@@ -0,0 +1,24 @@
1
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2
+import { IonicModule } from '@ionic/angular';
3
+
4
+import { NearmePage } from './nearme.page';
5
+
6
+describe('NearmePage', () => {
7
+  let component: NearmePage;
8
+  let fixture: ComponentFixture<NearmePage>;
9
+
10
+  beforeEach(waitForAsync(() => {
11
+    TestBed.configureTestingModule({
12
+      declarations: [ NearmePage ],
13
+      imports: [IonicModule.forRoot()]
14
+    }).compileComponents();
15
+
16
+    fixture = TestBed.createComponent(NearmePage);
17
+    component = fixture.componentInstance;
18
+    fixture.detectChanges();
19
+  }));
20
+
21
+  it('should create', () => {
22
+    expect(component).toBeTruthy();
23
+  });
24
+});

+ 45 - 0
src/app/nearme/nearme.page.ts

@@ -0,0 +1,45 @@
1
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
2
+import { WpServiceService } from '../wp-service.service';
3
+import { Geolocation } from '@ionic-native/geolocation/ngx';
4
+import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
5
+
6
+declare var google: any;
7
+
8
+
9
+@Component({
10
+  selector: 'app-nearme',
11
+  templateUrl: './nearme.page.html',
12
+  styleUrls: ['./nearme.page.scss'],
13
+})
14
+export class NearmePage implements OnInit {
15
+
16
+  @ViewChild('nearmap', { static: true }) mapRef: ElementRef;  
17
+
18
+  nearmap: any;
19
+  placenear: any = [];
20
+
21
+  constructor(private wpservice: WpServiceService, private geolocation: Geolocation) { }
22
+
23
+  ngOnInit() {
24
+     
25
+    this.showMap();
26
+    //console.log(this.mapRef.nativeElement);  
27
+    this.wpservice.getNear().subscribe((placeneardata) => {
28
+      this.placenear = placeneardata;
29
+      console.log('load Near Place');
30
+      console.log(placeneardata);
31
+    });
32
+
33
+  }
34
+
35
+  showMap() {
36
+    let location = new google.maps.LatLng(13.7643439, 100.6899729);
37
+    let options = {
38
+      center: location,
39
+      zoom: 15,
40
+      disableDefaultUI: true
41
+    }
42
+    this.nearmap = new google.maps.Map(this.mapRef.nativeElement, options);
43
+  }
44
+  
45
+}

+ 7 - 0
src/app/place/place.page.html

@@ -16,6 +16,13 @@
16 16
           <div class="txt-place-title">Place Category Name</div>
17 17
         </ion-col>
18 18
       </ion-row>
19
+      <ion-row>
20
+        <ion-col>
21
+          <ion-toolbar class="search">
22
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
23
+          </ion-toolbar>
24
+        </ion-col>
25
+      </ion-row>      
19 26
       <ion-card *ngFor="let pcl of placecatlist">
20 27
         <div *ngIf="$any(pcl).better_featured_image != null">
21 28
           <img src="{{$any(pcl).better_featured_image.source_url}}" alt="">

+ 8 - 1
src/app/province/province.page.html

@@ -16,6 +16,13 @@
16 16
           <div class="txt-place-title">Province Name</div>
17 17
         </ion-col>
18 18
       </ion-row>
19
+      <ion-row>
20
+        <ion-col>
21
+          <ion-toolbar class="search">
22
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
23
+          </ion-toolbar>
24
+        </ion-col>
25
+      </ion-row>
19 26
       <ion-card *ngFor="let provlist of provicelist">
20 27
         <div *ngIf="$any(provlist).better_featured_image != null">
21 28
           <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
@@ -24,7 +31,7 @@
24 31
           <img src="/assets/images/temp.png" />
25 32
         </div>
26 33
         <ion-card-header>
27
-          <a [routerLink]="['/tabs/place/', pldata.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
34
+          <a [routerLink]="['/tabs/place/', provlist.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
28 35
         </ion-card-header>
29 36
       </ion-card>
30 37
     </ion-grid>

+ 8 - 0
src/app/tabs/tabs-routing.module.ts

@@ -61,6 +61,14 @@ const routes: Routes = [
61 61
         loadChildren: () => import('../province/province.module').then(m => m.ProvincePageModule)
62 62
       },
63 63
       {
64
+        path: 'gmap',
65
+        loadChildren: () => import('../gmap/gmap.module').then(m => m.GmapPageModule)
66
+      },
67
+      {
68
+        path: 'nearme',
69
+        loadChildren: () => import('../nearme/nearme.module').then( m => m.NearmePageModule)
70
+      },
71
+      {
64 72
         path: '',
65 73
         redirectTo: '/tabs/home',
66 74
         pathMatch: 'full'

+ 5 - 3
src/app/tabs/tabs.page copy.html

@@ -1,8 +1,10 @@
1 1
 <ion-tabs>
2 2
   <ion-fab vertical="bottom" horizontal="center" slot="fixed">
3
-    <ion-fab-button>
4
-      <ion-icon name="add-outline"></ion-icon>
5
-    </ion-fab-button>
3
+    
4
+      <ion-fab-button [routerLink]="['/tabs/nearme/']">
5
+        <ion-icon name="add-outline"></ion-icon>
6
+      </ion-fab-button>
7
+    
6 8
   </ion-fab>
7 9
 
8 10
   <ion-tab-bar slot="bottom">

+ 5 - 6
src/app/tabs/tabs.page.html

@@ -1,17 +1,16 @@
1 1
 <ion-tabs>
2
-  <!-- <ion-fab vertical="bottom" horizontal="center" slot="fixed">
3
-    <ion-fab-button>
4
-      <ion-icon name="add-outline"></ion-icon>
2
+  <ion-fab vertical="bottom" horizontal="center" translucent="true">
3
+    <ion-fab-button routerLink="nearme" routerDirection="forward">
4
+    <ion-icon name="navigate"></ion-icon>
5 5
     </ion-fab-button>
6
-  </ion-fab> -->
7
-
6
+  </ion-fab>
8 7
   <ion-tab-bar slot="bottom">
9 8
     <ion-tab-button tab="home">
10 9
       <ion-icon name="home"></ion-icon>
11 10
       <ion-label>หน้าแรก</ion-label>
12 11
     </ion-tab-button>
13 12
 
14
-    <ion-tab-button tab="tab2">
13
+    <ion-tab-button tab="nearme">
15 14
       <ion-icon name="location"></ion-icon>
16 15
       <ion-label>ใกล้ฉัน</ion-label>
17 16
     </ion-tab-button>

+ 7 - 0
src/app/wp-service.service.ts

@@ -22,6 +22,13 @@ export class WpServiceService {
22 22
     );
23 23
   }
24 24
 
25
+  getNear() {
26
+    return this.http.get(
27
+      "/assets/json/place.json"
28
+      // "http://tamtime.iamarray.xyz/wp-json/wp/v2/place?_embed"
29
+    );
30
+  }
31
+
25 32
   getPlaceDetail(id) {
26 33
     return this.http.get(
27 34
       "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"

+ 5 - 1
src/global.scss

@@ -164,4 +164,8 @@ a {
164 164
  
165 165
 // ion-content {
166 166
 //   --background: url(/assets/images/wnr-bg.jpg) no-repeat center/cover fixed;
167
-// }
167
+// }
168
+.ios ion-fab-button {
169
+  position:absolute;
170
+  bottom: 25px;
171
+}

golf/tge - Gogs: Simplico Git Service

暫無描述

LICENSE 749B

1234567891011121314151617
  1. The ISC License
  2. Copyright (c) Isaac Z. Schlueter
  3. Permission to use, copy, modify, and/or distribute this software for any
  4. purpose with or without fee is hereby granted, provided that the above
  5. copyright notice and this permission notice appear in all copies.
  6. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  7. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
  8. FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  9. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  10. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  11. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  12. PERFORMANCE OF THIS SOFTWARE.