Skip to content

Commit a1db3eb

Browse files
frankpaganfrankpagan
committed
format html
1 parent 2215788 commit a1db3eb

File tree

3 files changed

+501
-194
lines changed

3 files changed

+501
-194
lines changed

‎demo/polyline_algorithm_test.html‎

Lines changed: 75 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,86 @@
1+
<!DOCTYPE html>
12
<script>
3+
// points = [{lat:xx, lng:xx}, {lat:xx, lng:xx}, {lat:xx, lng:xx}, ...];
24

3-
// points = [{lat:xx, lng:xx}, {lat:xx, lng:xx}, {lat:xx, lng:xx}, ...];
4-
5-
function polylineencode(points) {
6-
let result = "";
7-
let passpoint;
8-
for (let point of points) {
9-
if (passpoint) {
10-
result += encode(point.lat - passpoint.lat);
11-
result += encode(point.lng - passpoint.lng);
12-
}
13-
else {
14-
result += encode(point.lat);
15-
result += encode(point.lng);
16-
}
17-
passpoint = point;
18-
}
19-
return result;
20-
function encode(num) {
21-
let dec = Math.round(num * 100000);
22-
dec <<= 1;
23-
if (num < 0) dec = ~dec;
24-
let chunks = [];
25-
do {
26-
chunks.push(dec % 32);
27-
dec = Math.floor(dec / 32);
28-
} while(dec > 0);
29-
for (let key in chunks) {
30-
if (key < chunks.length - 1)
31-
chunks[key] |= 32;
32-
chunks[key] += 63;
33-
}
5+
function polylineencode(points) {
346
let result = "";
35-
for (let chunk of chunks) result += String.fromCharCode(chunk);
7+
let passpoint;
8+
for (let point of points) {
9+
if (passpoint) {
10+
result += encode(point.lat - passpoint.lat);
11+
result += encode(point.lng - passpoint.lng);
12+
} else {
13+
result += encode(point.lat);
14+
result += encode(point.lng);
15+
}
16+
passpoint = point;
17+
}
3618
return result;
37-
}
38-
}
39-
function polylinedecode(code) {
40-
let trucks = [];
41-
let truck = 0;
42-
let carriage_q = 0;
43-
let lat;
44-
let point;
45-
for (let x = 0, xx = code.length; x < xx; ++x) {
46-
let i = code.charCodeAt(x);
47-
i -= 63;
48-
let _5_bits = i << (32 - 5) >>> (32 - 5);
49-
truck |= _5_bits << carriage_q;
50-
carriage_q += 5;
51-
let is_last = (i & (1 << 5)) == 0;
52-
if (is_last) {
53-
truck >>>= 1;
54-
if ((truck & 1) == 1) {
55-
truck = ~truck;
19+
function encode(num) {
20+
let dec = Math.round(num * 100000);
21+
dec <<= 1;
22+
if (num < 0) dec = ~dec;
23+
let chunks = [];
24+
do {
25+
chunks.push(dec % 32);
26+
dec = Math.floor(dec / 32);
27+
} while (dec > 0);
28+
for (let key in chunks) {
29+
if (key < chunks.length - 1) chunks[key] |= 32;
30+
chunks[key] += 63;
5631
}
57-
if (lat === undefined) lat = truck / 100000;
58-
else {
59-
if (point === undefined)
60-
point = {lat: lat, lng: truck / 100000};
32+
let result = "";
33+
for (let chunk of chunks) result += String.fromCharCode(chunk);
34+
return result;
35+
}
36+
}
37+
function polylinedecode(code) {
38+
let trucks = [];
39+
let truck = 0;
40+
let carriage_q = 0;
41+
let lat;
42+
let point;
43+
for (let x = 0, xx = code.length; x < xx; ++x) {
44+
let i = code.charCodeAt(x);
45+
i -= 63;
46+
let _5_bits = (i << (32 - 5)) >>> (32 - 5);
47+
truck |= _5_bits << carriage_q;
48+
carriage_q += 5;
49+
let is_last = (i &amp; (1 << 5)) == 0;
50+
if (is_last) {
51+
truck >>>= 1;
52+
if ((truck &amp; 1) == 1) {
53+
truck = ~truck;
54+
}
55+
if (lat === undefined) lat = truck / 100000;
6156
else {
62-
point.lat += lat;
63-
point.lng += truck / 100000;
57+
if (point === undefined)
58+
point = { lat: lat, lng: truck / 100000 };
59+
else {
60+
point.lat += lat;
61+
point.lng += truck / 100000;
62+
}
63+
trucks.push({ lat: point.lat, lng: point.lng });
64+
lat = undefined;
6465
}
65-
trucks.push({lat:point.lat, lng:point.lng});
66-
lat = undefined;
66+
carriage_q = 0;
67+
truck = 0;
6768
}
68-
carriage_q = 0;
69-
truck = 0;
7069
}
70+
return trucks;
7171
}
72-
return trucks;
73-
}
7472

75-
function polyline(){
76-
let points = [{lat:38.5, lng:-120.2}, {lat:40.7, lng:-120.95}, {lat:43.252, lng:-126.453}];
77-
console.log(points);
78-
let code = polylineencode(points);
79-
console.log(code);
80-
let result = polylinedecode(code);
81-
console.log(result);
82-
}
83-
polyline();
84-
</script>
73+
function polyline() {
74+
let points = [
75+
{ lat: 38.5, lng: -120.2 },
76+
{ lat: 40.7, lng: -120.95 },
77+
{ lat: 43.252, lng: -126.453 },
78+
];
79+
console.log(points);
80+
let code = polylineencode(points);
81+
console.log(code);
82+
let result = polylinedecode(code);
83+
console.log(result);
84+
}
85+
polyline();
86+
</script>

‎demo/search.html‎

Lines changed: 105 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,119 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
55
<title>Google Search Autocomplete</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<link rel="manifest" href="/manifest.webmanifest" />
8-
</head>
7+
<link rel="manifest" href="/manifest.webmanifest" />
8+
</head>
99
<body>
1010
<div data-location_request="true">
11-
<div class="google_map" id="map" style="height:300px;" data-map_id="0"></div>
12-
<div>
13-
<input type="text" data-option_attribute="query" data-map_id="0"/>
14-
<button class="search" data-map_id="0">Search</button>
15-
</div>
16-
<div>
17-
<input type="radio" data-map_id="0" name="searchType" data-option_attribute="searchType" value="searchFromQuery" checked/>findPlaceFromQuery<br>
18-
<input type="radio" data-map_id="0" name="searchType" data-option_attribute="searchType" value="searchFromPhoneNumber"/>findPlaceFromPhoneNumber<br>
19-
<input type="radio" data-map_id="0" name="searchType" data-option_attribute="searchType" value="searchNearBy"/>nearbySearch<br>
20-
<input type="radio" data-map_id="0" name="searchType" data-option_attribute="searchType" value="searchText"/>textSearch<br>
21-
<!--<input type="checkbox" name="fields" data-option_attribute="fields" value="All"/>Fields(All)<br>-->
11+
<div
12+
class="google_map"
13+
id="map"
14+
style="height: 300px"
15+
data-map_id="0"></div>
16+
<div>
17+
<input
18+
type="text"
19+
data-option_attribute="query"
20+
data-map_id="0" />
21+
<button class="search" data-map_id="0">Search</button>
22+
</div>
23+
<div>
24+
<input
25+
type="radio"
26+
data-map_id="0"
27+
name="searchType"
28+
data-option_attribute="searchType"
29+
value="searchFromQuery"
30+
checked />findPlaceFromQuery<br />
31+
<input
32+
type="radio"
33+
data-map_id="0"
34+
name="searchType"
35+
data-option_attribute="searchType"
36+
value="searchFromPhoneNumber" />findPlaceFromPhoneNumber<br />
37+
<input
38+
type="radio"
39+
data-map_id="0"
40+
name="searchType"
41+
data-option_attribute="searchType"
42+
value="searchNearBy" />nearbySearch<br />
43+
<input
44+
type="radio"
45+
data-map_id="0"
46+
name="searchType"
47+
data-option_attribute="searchType"
48+
value="searchText" />textSearch<br />
49+
<!--<input type="checkbox" name="fields" data-option_attribute="fields" value="All"/>Fields(All)<br>-->
2250

23-
<input type="radio" data-map_id="0" name="locationBias" data-option_attribute="locationBias" value="LatLngBounds" checked/>LatLngBounds<br>
24-
<input type="radio" data-map_id="0" name="locationBias" data-option_attribute="locationBias" value="Radius"/>Radius<br>
25-
<input type="radio" data-map_id="0" name="locationBias" data-option_attribute="locationBias" value="LatLng"/>LatLng(only for find from query or phone number)<br>
26-
<p>Coodinate & Radius</p>
27-
Latitude<input type="text" data-map_id="0" data-option_attribute="latitude"/><br>
28-
Longitude<input type="text" data-map_id="0" data-option_attribute="longitude"/><br>
29-
Radius<input type="text" data-map_id="0" data-option_attribute="radius"/><br>
30-
<p></p>
31-
MinPriceLevel<input type="text" data-map_id="0" data-option_attribute="minPriceLevel"/><br>
32-
MaxPriceLevel<input type="text" data-map_id="0" data-option_attribute="maxPriceLevel"/><br>
33-
Name<input type="text" data-map_id="0" data-option_attribute="name"/><br>
34-
<input type="checkbox" data-map_id="0" data-option_attribute="openNow"/>OpenNow<br>
35-
<input type="checkbox" data-map_id="0" data-option_attribute="rankBy"/>RankByDistance<br>
51+
<input
52+
type="radio"
53+
data-map_id="0"
54+
name="locationBias"
55+
data-option_attribute="locationBias"
56+
value="LatLngBounds"
57+
checked />LatLngBounds<br />
58+
<input
59+
type="radio"
60+
data-map_id="0"
61+
name="locationBias"
62+
data-option_attribute="locationBias"
63+
value="Radius" />Radius<br />
64+
<input
65+
type="radio"
66+
data-map_id="0"
67+
name="locationBias"
68+
data-option_attribute="locationBias"
69+
value="LatLng" />LatLng(only for find from query or phone
70+
number)<br />
71+
<p>Coodinate &amp; Radius</p>
72+
Latitude<input
73+
type="text"
74+
data-map_id="0"
75+
data-option_attribute="latitude" /><br />
76+
Longitude<input
77+
type="text"
78+
data-map_id="0"
79+
data-option_attribute="longitude" /><br />
80+
Radius<input
81+
type="text"
82+
data-map_id="0"
83+
data-option_attribute="radius" /><br />
84+
<p></p>
85+
MinPriceLevel<input
86+
type="text"
87+
data-map_id="0"
88+
data-option_attribute="minPriceLevel" /><br />
89+
MaxPriceLevel<input
90+
type="text"
91+
data-map_id="0"
92+
data-option_attribute="maxPriceLevel" /><br />
93+
Name<input
94+
type="text"
95+
data-map_id="0"
96+
data-option_attribute="name" /><br />
97+
<input
98+
type="checkbox"
99+
data-map_id="0"
100+
data-option_attribute="openNow" />OpenNow<br />
101+
<input
102+
type="checkbox"
103+
data-map_id="0"
104+
data-option_attribute="rankBy" />RankByDistance<br />
105+
</div>
36106
</div>
37-
107+
38108
<script type="module">
39-
import {initMapSettings} from '../src/index.js';
40-
initMapSettings()
41-
109+
import { initMapSettings } from "../src/index.js";
110+
initMapSettings();
42111
</script>
43-
<script type="text/javascript" src="../dist/CoCreate-google-maps.js"></script>
44-
112+
<script
113+
type="text/javascript"
114+
src="../dist/CoCreate-google-maps.js"></script>
115+
45116
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCxZ_RRXPQ2Uqufgo39daiXZeQZQpIAiM&libraries=places&callback=initMapSettings"></script>
46117
<!--<script type="text/javascript" src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>-->
47-
48-
49118
</body>
50-
</html>
119+
</html>

0 commit comments

Comments
 (0)