lines-code">
+    // post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
46
+    // this.data = post;
32 47
     let id = this.route.snapshot.paramMap.get('id') || this.id;
33 48
     console.log("fetching ...");
34 49
     this.wpservice.getPlaceDetail(id).subscribe((data) => {
35
-      this.placelist = data;      
50
+      this.placelist = data;
51
+      this.latdynamic = data['acf']['gmap']['lat'];
52
+      this.londynamic = data['acf']['gmap']['lng'];
36 53
       console.log("load Place Detail ...");
54
+      console.log(this.latdynamic);
55
+      console.log("load Lati ...");
56
+      console.log(this.londynamic);
57
+      console.log("load Lon ...");
37 58
       console.log(data);
38 59
     }, error => {
39 60
       console.log("errror ", error);
40 61
     });
41 62
   }
42 63
 
64
+  loadMap() {
65
+    this.geolocation.getCurrentPosition().then((resp) => {
66
+
67
+      this.latitude = resp.coords.latitude;
68
+      this.longitude = resp.coords.longitude;
69
+      // this.latdynamic = resp.coords.latitude;
70
+      // this.londynamic = resp.coords.longitude;
71
+
72
+      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
73
+      let mapOptions = {
74
+        center: latLng,
75
+        zoom: 15,
76
+        mapTypeId: google.maps.MapTypeId.ROADMAP
77
+      }
78
+
79
+      this.getAddressFromCoords(resp.coords.latitude, resp.coords.longitude);
80
+
81
+      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
82
+
83
+      this.map.addListener('dragend', () => {
84
+
85
+        this.latitude = this.map.center.lat();
86
+        this.longitude = this.map.center.lng();
87
+
88
+        this.getAddressFromCoords(this.map.center.lat(), this.map.center.lng())
89
+      });
90
+
91
+    }).catch((error) => {
92
+      console.log('Error getting location', error);
93
+    });
94
+  }
95
+
96
+  getAddressFromCoords(lattitude, longitude) {
97
+    console.log("getAddressFromCoords " + lattitude + " " + longitude);
98
+    let options: NativeGeocoderOptions = {
99
+      useLocale: true,
100
+      maxResults: 5
101
+    };
102
+
103
+    this.nativeGeocoder.reverseGeocode(lattitude, longitude, options)
104
+      .then((result: NativeGeocoderResult[]) => {
105
+        this.address = "";
106
+        let responseAddress = [];
107
+        for (let [key, value] of Object.entries(result[0])) {
108
+          if (value.length > 0)
109
+            responseAddress.push(value);
110
+
111
+        }
112
+        responseAddress.reverse();
113
+        for (let value of responseAddress) {
114
+          this.address += value + ", ";
115
+        }
116
+        this.address = this.address.slice(0, -2);
117
+      })
118
+      .catch((error: any) => {
119
+        this.address = "Address Not Available!";
120
+      });
121
+
122
+  }
123
+
124
+  // getAddressFromCoords2(lattitude, longitude) {
125
+  //   console.log("getAddressFromCoords2 " + lattitude + " " + longitude);
126
+  //   let options: NativeGeocoderOptions = {
127
+  //     useLocale: true,
128
+  //     maxResults: 5
129
+  //   };
130
+  // }
131
+
132
+  // getGeoencoder(latitude, longitude) {
133
+  //   this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
134
+  //     .then((result: NativeGeocoderResult[]) => {
135
+  //       this.address = this.generateAddress(result[0]);
136
+  //     })
137
+  //     .catch((error: any) => {
138
+  //       alert('Error getting location' + JSON.stringify(error));
139
+  //     });
140
+  // }
43 141
 }

+ 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>

+ 1 - 18
src/app/province/province.page.scss

@@ -1,21 +1,4 @@
1
-// .bg {
2
-//   position: absolute;
3
-//   left: 0px;
4
-//   top: 0px;
5
-//   width: 100vw;
6
-//   height: 100vh;
7
-//   .holidaycard {
8
-//     position: absolute;
9
-//     left: 0px;
10
-//     bottom: 0px;
11
-//     min-height: 60%;
12
-//     width: 100%;
13
-//     padding: 10px;
14
-//     border-radius: 25px;
15
-//     background: white;
16
-//     --background: white;
17
-//   }
18
-// }
1
+
19 2
 .holidaycard {
20 3
   position: absolute;
21 4
   left: 0px;

+ 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"

BIN
src/assets/icon/location-marker.png


+ 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
+}

+ 2 - 0
src/index.html

@@ -17,6 +17,8 @@
17 17
   <!-- add to homescreen for ios -->
18 18
   <meta name="apple-mobile-web-app-capable" content="yes" />
19 19
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20
+
21
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHSbJHYItlRqJeZ737ju4weBHlarJIPGE"></script>
20 22
 </head>
21 23
 
22 24
 <body>

tum/occp_server - Gogs: Simplico Git Service

1 Commits (main)

Author SHA1 Message Date
  tum f863055e03 first commit 11 months ago