vue3-google-map 0.10.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -9
- package/dist/cjs/index.js +86 -26
- package/dist/es/index.js +84 -26
- package/dist/types/components/Circle.d.ts +1 -1
- package/dist/types/components/CustomMarker.vue.d.ts +19 -0
- package/dist/types/components/GoogleMap.vue.d.ts +12 -417
- package/dist/types/components/InfoWindow.vue.d.ts +0 -1
- package/dist/types/components/MarkerCluster.d.ts +15 -0
- package/dist/types/components/Polygon.d.ts +1 -1
- package/dist/types/components/Polyline.d.ts +1 -1
- package/dist/types/components/Rectangle.d.ts +1 -1
- package/dist/types/components/index.d.ts +2 -0
- package/dist/types/composables/useSetupMapComponent.d.ts +8 -3
- package/dist/types/index.d.ts +1 -0
- package/dist/types/shared/index.d.ts +6 -36
- package/dist/types/shims-google-maps-d.d.ts +15 -0
- package/dist/types/utils/index.d.ts +13 -0
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
`vue3-google-map` offers a set of composable components for easy use of Google Maps in your Vue 3 projects.
|
|
6
6
|
|
|
7
|
+
Note: Please refer to the [documentation site](https://vue3-google-map.netlify.app/) for rendered examples.
|
|
8
|
+
|
|
7
9
|
## Table of Contents
|
|
8
10
|
|
|
9
11
|
- [Getting Started](#getting-started)
|
|
@@ -16,7 +18,9 @@
|
|
|
16
18
|
- [Rectangle](#rectangle)
|
|
17
19
|
- [Circle](#circle)
|
|
18
20
|
- [Info Window](#info-window)
|
|
19
|
-
- [Custom
|
|
21
|
+
- [Custom Marker](#custom-marker)
|
|
22
|
+
- [Custom Control](#custom-control)
|
|
23
|
+
- [Marker Cluster](#marker-cluster)
|
|
20
24
|
- [Advanced Usage](#advanced-usage)
|
|
21
25
|
- [Contribution](#contribution)
|
|
22
26
|
- [License](#license)
|
|
@@ -43,8 +47,8 @@ Include the following script tag in your `index.html` (make sure to include it a
|
|
|
43
47
|
|
|
44
48
|
### Your First Map
|
|
45
49
|
|
|
46
|
-
To construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L30-L209) for
|
|
47
|
-
Other map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window),
|
|
50
|
+
To construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L30-L209) for all the supported `MapOptions`).
|
|
51
|
+
Other map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window), [CustomMarker](#custom-marker), [CustomControl](#custom-control), or [MarkerCluster](#marker-cluster)) to the default slot of the `GoogleMap` component.
|
|
48
52
|
|
|
49
53
|
```vue
|
|
50
54
|
<template>
|
|
@@ -80,7 +84,9 @@ The main mapping component is `GoogleMap`, however the following components are
|
|
|
80
84
|
- [Rectangle](#rectangle)
|
|
81
85
|
- [Circle](#circle)
|
|
82
86
|
- [InfoWindow](#info-window)
|
|
83
|
-
- [
|
|
87
|
+
- [CustomMarker](#custom-marker)
|
|
88
|
+
- [CustomControl](#custom-control)
|
|
89
|
+
- [MarkerCluster](#marker-cluster)
|
|
84
90
|
|
|
85
91
|
### Marker
|
|
86
92
|
|
|
@@ -422,7 +428,54 @@ export default defineComponent({
|
|
|
422
428
|
|
|
423
429
|
You can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow-Events) on the `InfoWindow` component.
|
|
424
430
|
|
|
425
|
-
### Custom
|
|
431
|
+
### Custom Marker
|
|
432
|
+
|
|
433
|
+
Regular markers can be customized a great deal but if you need to you can use the `CustomMarker` component and provide your own custom markup through it's `default` slot.
|
|
434
|
+
|
|
435
|
+
#### Options
|
|
436
|
+
|
|
437
|
+
| Parameter | Type | Description |
|
|
438
|
+
| :-------- | :------- | :------------------------- |
|
|
439
|
+
| `position` | `{ lat: number, lng: number}` | Sets the marker position. |
|
|
440
|
+
| `anchorPoint` | `'CENTER' \| 'TOP_CENTER' \|'BOTTOM_CENTER' \| 'LEFT_CENTER' \| 'RIGHT_CENTER' \| 'TOP_LEFT' \| 'TOP_RIGHT' \| 'BOTTOM_LEFT' \| 'BOTTOM_RIGHT'` | Sets how the marker is anchored relative to it's `position` point. Default is `CENTER`. |
|
|
441
|
+
| `offsetX` | `number` | Horizontal offset from the `position` point. |
|
|
442
|
+
| `offsetY` | `number` | Vertical offset from the `position` point. |
|
|
443
|
+
| `zIndex` | `number` | `z-index` value of the marker. |
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
```vue
|
|
447
|
+
<template>
|
|
448
|
+
<GoogleMap
|
|
449
|
+
api-key="YOUR_GOOGLE_MAPS_API_KEY"
|
|
450
|
+
style="width: 100%; height: 500px"
|
|
451
|
+
:center="center"
|
|
452
|
+
:zoom="15"
|
|
453
|
+
>
|
|
454
|
+
<CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }">
|
|
455
|
+
<div style="text-align: center">
|
|
456
|
+
<div style="font-size: 1.125rem">Vuejs Amsterdam</div>
|
|
457
|
+
<img src="https://vuejs.org/images/logo.png" width="50" height="50" style="margin-top: 8px" />
|
|
458
|
+
</div>
|
|
459
|
+
</CustomMarker>
|
|
460
|
+
</GoogleMap>
|
|
461
|
+
</template>
|
|
462
|
+
|
|
463
|
+
<script>
|
|
464
|
+
import { defineComponent } from 'vue'
|
|
465
|
+
import { GoogleMap, CustomMarker } from 'vue3-google-map'
|
|
466
|
+
|
|
467
|
+
export default defineComponent({
|
|
468
|
+
components: { GoogleMap, CustomMarker },
|
|
469
|
+
setup() {
|
|
470
|
+
const center = { lat: 52.36834, lng: 4.88635 }
|
|
471
|
+
|
|
472
|
+
return { center }
|
|
473
|
+
},
|
|
474
|
+
})
|
|
475
|
+
</script>
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
### Custom Control
|
|
426
479
|
|
|
427
480
|
Use the `CustomControl` component to add custom buttons/controls to your map.
|
|
428
481
|
|
|
@@ -480,6 +533,78 @@ export default defineComponent({
|
|
|
480
533
|
</style>
|
|
481
534
|
```
|
|
482
535
|
|
|
536
|
+
### Marker Cluster
|
|
537
|
+
|
|
538
|
+
Use the `MarkerCluster` component to display a large number of markers on a map. It will combine markers of close proximity into clusters, and simplify the display of markers on the map. Can be used with the `Marker` or `CustomMarker` components.
|
|
539
|
+
|
|
540
|
+
#### Usage
|
|
541
|
+
|
|
542
|
+
Simply pass your `Marker`/`CustomMarker`(s) in the `default` slot of the `MarkerCluster` component.
|
|
543
|
+
|
|
544
|
+
```vue
|
|
545
|
+
<template>
|
|
546
|
+
<GoogleMap
|
|
547
|
+
api-key="YOUR_GOOGLE_MAPS_API_KEY"
|
|
548
|
+
style="width: 100%; height: 500px"
|
|
549
|
+
:center="center"
|
|
550
|
+
:zoom="3"
|
|
551
|
+
>
|
|
552
|
+
<MarkerCluster>
|
|
553
|
+
<Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i" />
|
|
554
|
+
</MarkerCluster>
|
|
555
|
+
</GoogleMap>
|
|
556
|
+
</template>
|
|
557
|
+
|
|
558
|
+
<script>
|
|
559
|
+
import { defineComponent } from 'vue'
|
|
560
|
+
import { GoogleMap, Marker, MarkerCluster } from 'vue3-google-map'
|
|
561
|
+
|
|
562
|
+
export default defineComponent({
|
|
563
|
+
components: { GoogleMap, Marker, MarkerCluster },
|
|
564
|
+
setup() {
|
|
565
|
+
const center = { lat: -28.024, lng: 140.887 }
|
|
566
|
+
|
|
567
|
+
const locations = [
|
|
568
|
+
{ lat: -31.56391, lng: 147.154312 },
|
|
569
|
+
{ lat: -33.718234, lng: 150.363181 },
|
|
570
|
+
{ lat: -33.727111, lng: 150.371124 },
|
|
571
|
+
{ lat: -33.848588, lng: 151.209834 },
|
|
572
|
+
{ lat: -33.851702, lng: 151.216968 },
|
|
573
|
+
{ lat: -34.671264, lng: 150.863657 },
|
|
574
|
+
{ lat: -35.304724, lng: 148.662905 },
|
|
575
|
+
{ lat: -36.817685, lng: 175.699196 },
|
|
576
|
+
{ lat: -36.828611, lng: 175.790222 },
|
|
577
|
+
{ lat: -37.75, lng: 145.116667 },
|
|
578
|
+
{ lat: -37.759859, lng: 145.128708 },
|
|
579
|
+
{ lat: -37.765015, lng: 145.133858 },
|
|
580
|
+
{ lat: -37.770104, lng: 145.143299 },
|
|
581
|
+
{ lat: -37.7737, lng: 145.145187 },
|
|
582
|
+
{ lat: -37.774785, lng: 145.137978 },
|
|
583
|
+
{ lat: -37.819616, lng: 144.968119 },
|
|
584
|
+
{ lat: -38.330766, lng: 144.695692 },
|
|
585
|
+
{ lat: -39.927193, lng: 175.053218 },
|
|
586
|
+
{ lat: -41.330162, lng: 174.865694 },
|
|
587
|
+
{ lat: -42.734358, lng: 147.439506 },
|
|
588
|
+
{ lat: -42.734358, lng: 147.501315 },
|
|
589
|
+
{ lat: -42.735258, lng: 147.438 },
|
|
590
|
+
{ lat: -43.999792, lng: 170.463352 },
|
|
591
|
+
]
|
|
592
|
+
|
|
593
|
+
return { center, locations }
|
|
594
|
+
},
|
|
595
|
+
})
|
|
596
|
+
</script>
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
#### Options
|
|
600
|
+
|
|
601
|
+
`MarkerCluster` accepts an `options` prop (an object) where you can configure `algorithm`, `onClusterClick`, and `renderer` from the [MarkerClustererOptions](https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html) interface. Note that all these options are completely optional but non-reactive.
|
|
602
|
+
|
|
603
|
+
#### Events
|
|
604
|
+
|
|
605
|
+
You can listen for [the following events](https://googlemaps.github.io/js-markerclusterer/enums/MarkerClustererEvents.html) on the `MarkerCluster` component.
|
|
606
|
+
|
|
607
|
+
|
|
483
608
|
## Advanced Usage
|
|
484
609
|
|
|
485
610
|
The basic components that `vue3-google-map` provides are fully reactive and will get you pretty far. Should you need to access the Google Maps API, however, the `GoogleMaps` component exposes the following:
|
|
@@ -489,7 +614,7 @@ The basic components that `vue3-google-map` provides are fully reactive and will
|
|
|
489
614
|
- `api`: The [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference).
|
|
490
615
|
- `mapTilesLoaded`: A boolean indicating when the map tiles have been fully loaded.
|
|
491
616
|
|
|
492
|
-
Some
|
|
617
|
+
Some usage patterns:
|
|
493
618
|
|
|
494
619
|
```vue
|
|
495
620
|
<template>
|
|
@@ -511,8 +636,8 @@ export default defineComponent({
|
|
|
511
636
|
setup() {
|
|
512
637
|
const mapRef = ref(null)
|
|
513
638
|
|
|
514
|
-
|
|
515
|
-
|
|
639
|
+
// Second pattern: compute some value using the API or map instance when "ready"
|
|
640
|
+
const markerIcon = computed(() => mapRef.value?.ready
|
|
516
641
|
? {
|
|
517
642
|
url: /* icon image url */,
|
|
518
643
|
scaledSize: new mapRef.value.api.Size(20, 20)
|
|
@@ -520,7 +645,7 @@ export default defineComponent({
|
|
|
520
645
|
: null)
|
|
521
646
|
|
|
522
647
|
// Third pattern: watch for "ready" then do something with the API or map instance
|
|
523
|
-
watch(() => mapRef.value
|
|
648
|
+
watch(() => mapRef.value?.ready, (ready) => {
|
|
524
649
|
if (!ready) return
|
|
525
650
|
|
|
526
651
|
// do something with the api using `mapRef.value.api`
|
|
@@ -612,6 +737,7 @@ In addition, most of the subcomponents expose their instance should you need it:
|
|
|
612
737
|
- `Rectangle` exposes `rectangle` (a [Rectangle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle) class instance).
|
|
613
738
|
- `Circle` exposes `circle` (a [Circle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Circle) class instance).
|
|
614
739
|
- `InfoWindow` exposes `infoWindow` (an [InfoWindow](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow) class instance).
|
|
740
|
+
- `MarkerCluster` exposes `markerCluster` (a [MarkerClusterer](https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html) class instance).
|
|
615
741
|
|
|
616
742
|
## Contribution
|
|
617
743
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,32 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/*
|
|
2
|
+
*****************************************************************************
|
|
3
|
+
Copyright (c) Microsoft Corporation.
|
|
4
|
+
|
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
6
|
+
purpose with or without fee is hereby granted.
|
|
7
|
+
|
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
9
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
10
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
11
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
12
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
+
*****************************************************************************/
|
|
16
|
+
'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var vue=require("vue");let mapSymbol=Symbol("map"),apiSymbol=Symbol("api"),markerSymbol=Symbol("marker"),markerClusterSymbol=Symbol("markerCluster"),customMarkerClassSymbol=Symbol("CustomMarker"),mapTilesLoadedSymbol=Symbol("mapTilesLoaded"),polylineEvents="click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick".split(" ");
|
|
17
|
+
var fastDeepEqual$1=function equal(a,b){if(a===b)return!0;if(a&&b&&"object"==typeof a&&"object"==typeof b){if(a.constructor!==b.constructor)return!1;var d;if(Array.isArray(a)){var e=a.length;if(e!=b.length)return!1;for(d=e;0!==d--;)if(!equal(a[d],b[d]))return!1;return!0}if(a.constructor===RegExp)return a.source===b.source&&a.flags===b.flags;if(a.valueOf!==Object.prototype.valueOf)return a.valueOf()===b.valueOf();if(a.toString!==Object.prototype.toString)return a.toString()===b.toString();var g=Object.keys(a);
|
|
18
|
+
e=g.length;if(e!==Object.keys(b).length)return!1;for(d=e;0!==d--;)if(!Object.prototype.hasOwnProperty.call(b,g[d]))return!1;for(d=e;0!==d--;)if(e=g[d],!equal(a[e],b[e]))return!1;return!0}return a!==a&&b!==b};let DEFAULT_ID="__googleMapsScriptId";
|
|
19
|
+
class Loader{constructor({apiKey:a,channel:b,client:c,id:d=DEFAULT_ID,libraries:e=[],language:g,region:f,version:k,mapIds:l,nonce:h,retries:m=3,url:n="https://maps.googleapis.com/maps/api/js"}){this.CALLBACK="__googleMapsCallback";this.callbacks=[];this.loading=this.done=!1;this.errors=[];this.version=k;this.apiKey=a;this.channel=b;this.client=c;this.id=d||DEFAULT_ID;this.libraries=e;this.language=g;this.region=f;this.mapIds=l;this.nonce=h;this.retries=m;this.url=n;if(Loader.instance){if(!fastDeepEqual$1(this.options,
|
|
5
20
|
Loader.instance.options))throw Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(Loader.instance.options)}`);return Loader.instance}Loader.instance=this}get options(){return{version:this.version,apiKey:this.apiKey,channel:this.channel,client:this.client,id:this.id,libraries:this.libraries,language:this.language,region:this.region,mapIds:this.mapIds,nonce:this.nonce,url:this.url}}get failed(){return this.done&&!this.loading&&this.errors.length>=
|
|
6
21
|
this.retries+1}createUrl(){let a=this.url;a+=`?callback=${this.CALLBACK}`;this.apiKey&&(a+=`&key=${this.apiKey}`);this.channel&&(a+=`&channel=${this.channel}`);this.client&&(a+=`&client=${this.client}`);0<this.libraries.length&&(a+=`&libraries=${this.libraries.join(",")}`);this.language&&(a+=`&language=${this.language}`);this.region&&(a+=`®ion=${this.region}`);this.version&&(a+=`&v=${this.version}`);this.mapIds&&(a+=`&map_ids=${this.mapIds.join(",")}`);return a}deleteScript(){let a=document.getElementById(this.id);
|
|
7
|
-
a&&a.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise((a,b)=>{this.loadCallback(
|
|
22
|
+
a&&a.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise((a,b)=>{this.loadCallback(c=>{c?b(c.error):a(window.google)})})}loadCallback(a){this.callbacks.push(a);this.execute()}setScript(){if(document.getElementById(this.id))this.callback();else{var a=this.createUrl(),b=document.createElement("script");b.id=this.id;b.type="text/javascript";b.src=a;b.onerror=this.loadErrorCallback.bind(this);b.defer=!0;b.async=!0;this.nonce&&(b.nonce=this.nonce);document.head.appendChild(b)}}reset(){this.deleteScript();
|
|
8
23
|
this.loading=this.done=!1;this.errors=[];this.onerrorEvent=null}resetIfRetryingFailed(){this.failed&&this.reset()}loadErrorCallback(a){this.errors.push(a);this.errors.length<=this.retries?(a=this.errors.length*Math.pow(2,this.errors.length),console.log(`Failed to load Google Maps script, retrying in ${a} ms.`),setTimeout(()=>{this.deleteScript();this.setScript()},a)):(this.onerrorEvent=a,this.callback())}setCallback(){window.__googleMapsCallback=this.callback.bind(this)}callback(){this.done=!0;this.loading=
|
|
9
|
-
!1;this.callbacks.forEach(a=>{a(this.onerrorEvent)});this.callbacks=[]}execute(){this.resetIfRetryingFailed();this.done?this.callback():window.google&&window.google.maps&&window.google.maps.version?(console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),this.callback()):this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}
|
|
10
|
-
|
|
24
|
+
!1;this.callbacks.forEach(a=>{a(this.onerrorEvent)});this.callbacks=[]}execute(){this.resetIfRetryingFailed();this.done?this.callback():window.google&&window.google.maps&&window.google.maps.version?(console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),this.callback()):this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}
|
|
25
|
+
function createCustomMarkerClass(a){return class extends a.OverlayView{constructor(a){super();let {element:b,...d}=a;this.element=b;this.opts=d;this.opts.map&&this.setMap(this.opts.map)}getPosition(){return this.opts.position?this.opts.position instanceof a.LatLng?this.opts.position:new a.LatLng(this.opts.position):null}getVisible(){if(!this.element)return!1;let a=this.element;return"none"!==a.style.display&&"hidden"!==a.style.visibility&&(""===a.style.opacity||.01<Number(a.style.opacity))}onAdd(){if(this.element){var a=
|
|
26
|
+
this.getPanes();a&&a.overlayMouseTarget.appendChild(this.element)}}draw(){if(this.element){var a=this.getProjection().fromLatLngToDivPixel(this.getPosition());if(a){this.element.style.position="absolute";let b=this.element.offsetHeight;var c=this.element.offsetWidth;switch(this.opts.anchorPoint){case "TOP_CENTER":c=a.x-c/2;a=a.y;break;case "BOTTOM_CENTER":c=a.x-c/2;a=a.y-b;break;case "LEFT_CENTER":c=a.x;a=a.y-b/2;break;case "RIGHT_CENTER":c=a.x-c;a=a.y-b/2;break;case "TOP_LEFT":c=a.x;a=a.y;break;
|
|
27
|
+
case "TOP_RIGHT":c=a.x-c;a=a.y;break;case "BOTTOM_LEFT":c=a.x;a=a.y-b;break;case "BOTTOM_RIGHT":c=a.x-c;a=a.y-b;break;default:c=a.x-c/2,a=a.y-b/2}this.element.style.left=c+"px";this.element.style.top=a+"px";this.element.style.transform=`translateX(${this.opts.offsetX||0}px) translateY(${this.opts.offsetY||0}px)`;this.opts.zIndex&&(this.element.style.zIndex=this.opts.zIndex.toString())}}}onRemove(){this.element&&this.element.remove()}setOptions(a){this.opts=a;this.draw()}}}
|
|
28
|
+
let loaderInstance,mapEvents="bounds_changed center_changed click dblclick drag dragend dragstart heading_changed idle maptypeid_changed mousemove mouseout mouseover projection_changed resize rightclick tilesloaded tilt_changed zoom_changed".split(" ");
|
|
29
|
+
var _sfc_main$3=vue.defineComponent({props:{apiPromise:{type:Promise},apiKey:{type:String,default:""},version:{type:String,default:"weekly"},libraries:{type:Array,default:()=>["places"]},region:{type:String,required:!1},language:{type:String,required:!1},backgroundColor:{type:String,required:!1},center:{type:Object,default:()=>({lat:0,lng:0})},clickableIcons:{type:Boolean,required:!1,default:void 0},controlSize:{type:Number,required:!1},disableDefaultUi:{type:Boolean,required:!1,default:void 0},disableDoubleClickZoom:{type:Boolean,
|
|
11
30
|
required:!1,default:void 0},draggable:{type:Boolean,required:!1,default:void 0},draggableCursor:{type:String,required:!1},draggingCursor:{type:String,required:!1},fullscreenControl:{type:Boolean,required:!1,default:void 0},fullscreenControlPosition:{type:String,required:!1},gestureHandling:{type:String,required:!1},heading:{type:Number,required:!1},keyboardShortcuts:{type:Boolean,required:!1,default:void 0},mapTypeControl:{type:Boolean,required:!1,default:void 0},mapTypeControlOptions:{type:Object,
|
|
12
|
-
required:!1},mapTypeId:{type:[Number,String],required:!1},maxZoom:{type:Number,required:!1},minZoom:{type:Number,required:!1},noClear:{type:Boolean,required:!1,default:void 0},panControl:{type:Boolean,required:!1,default:void 0},panControlPosition:{type:String,required:!1},restriction:{type:Object,required:!1},rotateControl:{type:Boolean,required:!1,default:void 0},rotateControlPosition:{type:String,required:!1},scaleControl:{type:Boolean,required:!1,default:void 0},
|
|
13
|
-
required:!1},scrollwheel:{type:Boolean,required:!1,default:void 0},streetView:{type:Object,required:!1},streetViewControl:{type:Boolean,required:!1,default:void 0},streetViewControlPosition:{type:String,required:!1},styles:{type:Array,required:!1},tilt:{type:Number,required:!1},zoom:{type:Number,required:!1},zoomControl:{type:Boolean,required:!1,default:void 0},zoomControlPosition:{type:String,required:!1}},emits:mapEvents,setup(a,{emit:b}){let
|
|
14
|
-
g=vue.ref(!1);vue.provide(mapSymbol,
|
|
15
|
-
fullscreenControlOptions:
|
|
16
|
-
|
|
17
|
-
(
|
|
18
|
-
function styleInject(a,b){void 0===b&&(b={});b=b.insertAt;if(a&&"undefined"!==typeof document){var
|
|
19
|
-
vue.pushScopeId("data-v-177d06e3");let _hoisted_1$2={ref:"mapRef",class:"mapdiv"};vue.popScopeId();let _sfc_render$
|
|
20
|
-
let useSetupMapComponent=(a,b,
|
|
21
|
-
|
|
22
|
-
|
|
31
|
+
required:!1},mapTypeId:{type:[Number,String],required:!1},mapId:{type:String,required:!1},maxZoom:{type:Number,required:!1},minZoom:{type:Number,required:!1},noClear:{type:Boolean,required:!1,default:void 0},panControl:{type:Boolean,required:!1,default:void 0},panControlPosition:{type:String,required:!1},restriction:{type:Object,required:!1},rotateControl:{type:Boolean,required:!1,default:void 0},rotateControlPosition:{type:String,required:!1},scaleControl:{type:Boolean,required:!1,default:void 0},
|
|
32
|
+
scaleControlStyle:{type:Number,required:!1},scrollwheel:{type:Boolean,required:!1,default:void 0},streetView:{type:Object,required:!1},streetViewControl:{type:Boolean,required:!1,default:void 0},streetViewControlPosition:{type:String,required:!1},styles:{type:Array,required:!1},tilt:{type:Number,required:!1},zoom:{type:Number,required:!1},zoomControl:{type:Boolean,required:!1,default:void 0},zoomControlPosition:{type:String,required:!1}},emits:mapEvents,setup(a,{emit:b}){let c=vue.ref(),d=vue.ref(!1),
|
|
33
|
+
e=vue.ref(),g=vue.ref(),f=vue.ref(!1);vue.provide(mapSymbol,e);vue.provide(apiSymbol,g);vue.provide(mapTilesLoadedSymbol,f);let k=()=>{const b={...a};Object.keys(b).forEach(a=>{void 0===b[a]&&delete b[a]});var c=a=>{var b;return a?{position:null===(b=g.value)||void 0===b?void 0:b.ControlPosition[a]}:{}};c={scaleControlOptions:a.scaleControlStyle?{style:a.scaleControlStyle}:{},panControlOptions:c(a.panControlPosition),zoomControlOptions:c(a.zoomControlPosition),rotateControlOptions:c(a.rotateControlPosition),
|
|
34
|
+
streetViewControlOptions:c(a.streetViewControlPosition),fullscreenControlOptions:c(a.fullscreenControlPosition),disableDefaultUI:a.disableDefaultUi};return{...b,...c}},l=vue.watch([g,e],([a,b])=>{a&&b&&(a.event.addListenerOnce(b,"tilesloaded",()=>{f.value=!0}),setTimeout(l,0))},{immediate:!0}),h=f=>{g.value=vue.markRaw(f.maps);e.value=vue.markRaw(new f.maps.Map(c.value,k()));f=createCustomMarkerClass(g.value);g.value[customMarkerClassSymbol]=f;mapEvents.forEach(a=>{var c;null===(c=e.value)||void 0===
|
|
35
|
+
c?void 0:c.addListener(a,c=>b(a,c))});d.value=!0;f=Object.keys(a).filter(a=>!"apiPromise apiKey version libraries region language center zoom".split(" ").includes(a)).map(b=>vue.toRef(a,b));vue.watch([()=>a.center,()=>a.zoom,...f],([a,b],[c,d])=>{var f,g,h;const {center:m,zoom:l,...n}=k();null===(f=e.value)||void 0===f?void 0:f.setOptions(n);void 0!==b&&b!==d&&(null===(g=e.value)||void 0===g?void 0:g.setZoom(b));b=!c||a.lng!==c.lng||a.lat!==c.lat;a&&b&&(null===(h=e.value)||void 0===h?void 0:h.panTo(a))})};
|
|
36
|
+
vue.onMounted(()=>{if(a.apiPromise&&a.apiPromise instanceof Promise)a.apiPromise.then(h);else{try{const {apiKey:b,region:c,version:d,language:e,libraries:f}=a;loaderInstance=new Loader({apiKey:b,region:c,version:d,language:e,libraries:f})}catch(m){console.error(m)}loaderInstance.load().then(h)}});vue.onBeforeUnmount(()=>{var a;f.value=!1;e.value&&(null===(a=g.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value))});return{mapRef:c,ready:d,map:e,api:g,mapTilesLoaded:f}}});
|
|
37
|
+
function styleInject(a,b){void 0===b&&(b={});b=b.insertAt;if(a&&"undefined"!==typeof document){var c=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css";"top"===b?c.firstChild?c.insertBefore(d,c.firstChild):c.appendChild(d):c.appendChild(d);d.styleSheet?d.styleSheet.cssText=a:d.appendChild(document.createTextNode(a))}}var css_248z$2="\n.mapdiv[data-v-177d06e3] {\n width: 100%;\n height: 100%;\n}\n";styleInject(css_248z$2);let _withId$2=vue.withScopeId("data-v-177d06e3");
|
|
38
|
+
vue.pushScopeId("data-v-177d06e3");let _hoisted_1$2={ref:"mapRef",class:"mapdiv"};vue.popScopeId();let _sfc_render$3=_withId$2((a,b,c,d,e,g)=>(vue.openBlock(),vue.createBlock("div",null,[vue.createVNode("div",_hoisted_1$2,null,512),vue.renderSlot(a.$slots,"default",{ready:a.ready,map:a.map,api:a.api,mapTilesLoaded:a.mapTilesLoaded},void 0,!0)])));_sfc_main$3.render=_sfc_render$3;_sfc_main$3.__scopeId="data-v-177d06e3";
|
|
39
|
+
let isMarkerCtorKey=a=>"Marker"===a,isCustomMarkerCtorKey=a=>a===customMarkerClassSymbol,useSetupMapComponent=(a,b,c,d)=>{const e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref()),k=vue.inject(markerClusterSymbol,vue.ref()),l=vue.computed(()=>!!(k.value&&f.value&&(e.value instanceof f.value.Marker||e.value instanceof f.value[customMarkerClassSymbol])));vue.watch([g,c],(h,[m,n])=>{var q,r,p;h=JSON.stringify(c.value)!==JSON.stringify(n)||g.value!==m;g.value&&f.value&&h&&
|
|
40
|
+
(e.value?(e.value.setOptions(c.value),l.value&&(null===(q=k.value)||void 0===q?void 0:q.removeMarker(e.value),null===(r=k.value)||void 0===r?void 0:r.addMarker(e.value))):(isMarkerCtorKey(a)?e.value=vue.markRaw(new f.value[a](c.value)):isCustomMarkerCtorKey(a)?e.value=vue.markRaw(new f.value[a](c.value)):e.value=vue.markRaw(new f.value[a]({...c.value,map:g.value})),l.value?null===(p=k.value)||void 0===p?void 0:p.addMarker(e.value):e.value.setMap(g.value),b.forEach(a=>{var b;null===(b=e.value)||void 0===
|
|
41
|
+
b?void 0:b.addListener(a,b=>d(a,b))})))},{immediate:!0});vue.onBeforeUnmount(()=>{var a,b;e.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value),l.value?null===(b=k.value)||void 0===b?void 0:b.removeMarker(e.value):e.value.setMap(null))});return e},markerEvents="animation_changed click dblclick rightclick dragstart dragend drag mouseover mousedown mouseout mouseup draggable_changed clickable_changed contextmenu cursor_changed flat_changed rightclick zindex_changed icon_changed position_changed shape_changed title_changed visible_changed".split(" ");
|
|
42
|
+
var Marker=vue.defineComponent({name:"Marker",props:{options:{type:Object,required:!0}},emits:markerEvents,setup(a,{emit:b,expose:c,slots:d}){a=vue.toRef(a,"options");b=useSetupMapComponent("Marker",markerEvents,a,b);vue.provide(markerSymbol,b);c({marker:b});return()=>{var a;return null===(a=d.default)||void 0===a?void 0:a.call(d)}}}),Polyline=vue.defineComponent({name:"Polyline",props:{options:{type:Object,required:!0}},emits:polylineEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{polyline:useSetupMapComponent("Polyline",
|
|
23
43
|
polylineEvents,a,b)}},render:()=>null}),Polygon=vue.defineComponent({name:"Polygon",props:{options:{type:Object,required:!0}},emits:polylineEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{polygon:useSetupMapComponent("Polygon",polylineEvents,a,b)}},render:()=>null});let rectangleEvents=polylineEvents.concat(["bounds_changed"]);
|
|
24
44
|
var Rectangle=vue.defineComponent({name:"Rectangle",props:{options:{type:Object,required:!0}},emits:rectangleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{rectangle:useSetupMapComponent("Rectangle",rectangleEvents,a,b)}},render:()=>null});let circleEvents=polylineEvents.concat(["center_changed","radius_changed"]);
|
|
25
|
-
var Circle=vue.defineComponent({name:"Circle",props:{options:{type:Object,required:!0}},emits:circleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{circle:useSetupMapComponent("Circle",circleEvents,a,b)}},render:()=>null}),_sfc_main$
|
|
26
|
-
vue.ref(!1)),
|
|
27
|
-
a.index,b=>{b&&
|
|
28
|
-
_sfc_main$
|
|
29
|
-
var _sfc_main=vue.defineComponent({props:{options:{type:Object,default:()=>({})}},emits:infoWindowEvents,setup(a,{slots:b,emit:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
let _sfc_render=_withId((a,b,
|
|
45
|
+
var Circle=vue.defineComponent({name:"Circle",props:{options:{type:Object,required:!0}},emits:circleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{circle:useSetupMapComponent("Circle",circleEvents,a,b)}},render:()=>null}),_sfc_main$2=vue.defineComponent({props:{position:{type:String,required:!0},index:{type:Number,default:1}},emits:["content:loaded"],setup(a,{emit:b}){let c=vue.ref(null),d=vue.inject(mapSymbol,vue.ref()),e=vue.inject(apiSymbol,vue.ref()),g=vue.inject(mapTilesLoadedSymbol,
|
|
46
|
+
vue.ref(!1)),f=vue.ref(!1),k=vue.watch([g,e,c],([c,d,e])=>{d&&c&&e&&(l(a.position),f.value=!0,b("content:loaded"),setTimeout(k,0))},{immediate:!0}),l=a=>{d.value&&e.value&&c.value&&d.value.controls[e.value.ControlPosition[a]].push(c.value)},h=a=>{if(d.value&&e.value){let b=null;a=e.value.ControlPosition[a];d.value.controls[a].forEach((a,d)=>{a===c.value&&(b=d)});null!==b&&d.value.controls[a].removeAt(b)}};vue.onBeforeUnmount(()=>h(a.position));vue.watch(()=>a.position,(a,b)=>{h(b);l(a)});vue.watch(()=>
|
|
47
|
+
a.index,b=>{b&&c.value&&(c.value.index=a.index)});return{controlRef:c,showContent:f}}});let _hoisted_1$1={ref:"controlRef"};function _sfc_render$2(a,b,c,d,e,g){return vue.openBlock(),vue.createBlock(vue.Fragment,null,[vue.createCommentVNode("\n v-show must be used instead of v-if otherwise there\n would be no rendered content pushed to the map controls\n "),vue.withDirectives(vue.createVNode("div",_hoisted_1$1,[vue.renderSlot(a.$slots,"default")],512),[[vue.vShow,a.showContent]])],2112)}
|
|
48
|
+
_sfc_main$2.render=_sfc_render$2;let infoWindowEvents="closeclick content_changed domready position_changed visible zindex_changed".split(" ");
|
|
49
|
+
var _sfc_main$1=vue.defineComponent({props:{options:{type:Object,default:()=>({})}},emits:infoWindowEvents,setup(a,{slots:b,emit:c}){let d=vue.ref(),e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref()),k=vue.inject(markerSymbol,vue.ref()),l,h=vue.computed(()=>{var a;return null===(a=b.default)||void 0===a?void 0:a.call(b).some(a=>a.type!==vue.Comment)});vue.onMounted(()=>{vue.watch([g,()=>a.options],([,a],[b,q])=>{b=JSON.stringify(a)!==JSON.stringify(q)||g.value!==b;g.value&&
|
|
50
|
+
f.value&&b&&(d.value?(d.value.setOptions({...a,content:h.value?e.value:a.content}),k.value||d.value.open({map:g.value})):(d.value=d.value=vue.markRaw(new f.value.InfoWindow({...a,content:h.value?e.value:a.content})),k.value?l=k.value.addListener("click",()=>{d.value&&d.value.open({map:g.value,anchor:k.value})}):d.value.open({map:g.value}),infoWindowEvents.forEach(a=>{var b;null===(b=d.value)||void 0===b?void 0:b.addListener(a,b=>c(a,b))})))},{immediate:!0})});vue.onBeforeUnmount(()=>{var a;l&&l.remove();
|
|
51
|
+
d.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(d.value),d.value.close())});return{infoWindow:d,infoWindowRef:e,hasSlotContent:h}}}),css_248z$1="\n.info-window-content[data-v-5b373d6e] {\n display: none;\n}\n.mapdiv .info-window-content[data-v-5b373d6e] {\n display: inline-block;\n}\n";styleInject(css_248z$1);let _withId$1=vue.withScopeId("data-v-5b373d6e");vue.pushScopeId("data-v-5b373d6e");let _hoisted_1={key:0,ref:"infoWindowRef",class:"info-window-content"};vue.popScopeId();
|
|
52
|
+
let _sfc_render$1=_withId$1((a,b,c,d,e,g)=>a.hasSlotContent?(vue.openBlock(),vue.createBlock("div",_hoisted_1,[vue.renderSlot(a.$slots,"default",{},void 0,!0)],512)):vue.createCommentVNode("v-if",!0));_sfc_main$1.render=_sfc_render$1;_sfc_main$1.__scopeId="data-v-5b373d6e";function sortKD(a,b,c,d,e,g){if(!(e-d<=c)){var f=d+e>>1;select(a,b,f,d,e,g%2);sortKD(a,b,c,d,f-1,g+1);sortKD(a,b,c,f+1,e,g+1)}}
|
|
53
|
+
function select(a,b,c,d,e,g){for(;e>d;){if(600<e-d){var f=e-d+1,k=c-d+1,l=Math.log(f),h=.5*Math.exp(2*l/3);l=.5*Math.sqrt(l*h*(f-h)/f)*(0>k-f/2?-1:1);select(a,b,c,Math.max(d,Math.floor(c-k*h/f+l)),Math.min(e,Math.floor(c+(f-k)*h/f+l)),g)}f=b[2*c+g];k=d;h=e;swapItem(a,b,d,c);for(b[2*e+g]>f&&swapItem(a,b,d,e);k<h;){swapItem(a,b,k,h);k++;for(h--;b[2*k+g]<f;)k++;for(;b[2*h+g]>f;)h--}b[2*d+g]===f?swapItem(a,b,d,h):(h++,swapItem(a,b,h,e));h<=c&&(d=h+1);c<=h&&(e=h-1)}}
|
|
54
|
+
function swapItem(a,b,c,d){swap(a,c,d);swap(b,2*c,2*d);swap(b,2*c+1,2*d+1)}function swap(a,b,c){let d=a[b];a[b]=a[c];a[c]=d}
|
|
55
|
+
function range(a,b,c,d,e,g,f){let k=[0,a.length-1,0],l=[],h,m;for(;k.length;){var n=k.pop();let q=k.pop(),r=k.pop();if(q-r<=f){for(n=r;n<=q;n++)h=b[2*n],m=b[2*n+1],h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[n]);continue}let p=Math.floor((r+q)/2);h=b[2*p];m=b[2*p+1];h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[p]);let t=(n+1)%2;if(0===n?c<=h:d<=m)k.push(r),k.push(p-1),k.push(t);if(0===n?e>=h:g>=m)k.push(p+1),k.push(q),k.push(t)}return l}
|
|
56
|
+
function within(a,b,c,d,e,g){let f=[0,a.length-1,0],k=[],l=e*e;for(;f.length;){var h=f.pop();let m=f.pop(),n=f.pop();if(m-n<=g){for(h=n;h<=m;h++)sqDist(b[2*h],b[2*h+1],c,d)<=l&&k.push(a[h]);continue}let q=Math.floor((n+m)/2),r=b[2*q],p=b[2*q+1];sqDist(r,p,c,d)<=l&&k.push(a[q]);let t=(h+1)%2;if(0===h?c-e<=r:d-e<=p)f.push(n),f.push(q-1),f.push(t);if(0===h?c+e>=r:d+e>=p)f.push(q+1),f.push(m),f.push(t)}return k}function sqDist(a,b,c,d){a-=c;b-=d;return a*a+b*b}let defaultGetX=a=>a[0],defaultGetY=a=>a[1];
|
|
57
|
+
class KDBush{constructor(a,b=defaultGetX,c=defaultGetY,d=64,e=Float64Array){this.nodeSize=d;this.points=a;let g=this.ids=new (65536>a.length?Uint16Array:Uint32Array)(a.length);e=this.coords=new e(2*a.length);for(let d=0;d<a.length;d++)g[d]=d,e[2*d]=b(a[d]),e[2*d+1]=c(a[d]);sortKD(g,e,d,0,g.length-1,0)}range(a,b,c,d){return range(this.ids,this.coords,a,b,c,d,this.nodeSize)}within(a,b,c){return within(this.ids,this.coords,a,b,c,this.nodeSize)}}
|
|
58
|
+
let defaultOptions={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:a=>a},fround=Math.fround||(a=>b=>{a[0]=+b;return a[0]})(new Float32Array(1));
|
|
59
|
+
class Supercluster{constructor(a){this.options=extend$1(Object.create(defaultOptions),a);this.trees=Array(this.options.maxZoom+1)}load(a){let {log:b,minZoom:c,maxZoom:d,nodeSize:e}=this.options;b&&console.time("total time");var g=`prepare ${a.length} points`;b&&console.time(g);this.points=a;let f=[];for(let b=0;b<a.length;b++)a[b].geometry&&f.push(createPointCluster(a[b],b));this.trees[d+1]=new KDBush(f,getX,getY,e,Float32Array);b&&console.timeEnd(g);for(a=d;a>=c;a--)g=+Date.now(),f=this._cluster(f,
|
|
60
|
+
a),this.trees[a]=new KDBush(f,getX,getY,e,Float32Array),b&&console.log("z%d: %d clusters in %dms",a,f.length,+Date.now()-g);b&&console.timeEnd("total time");return this}getClusters(a,b){let c=((a[0]+180)%360+360)%360-180;var d=Math.max(-90,Math.min(90,a[1])),e=180===a[2]?180:((a[2]+180)%360+360)%360-180;let g=Math.max(-90,Math.min(90,a[3]));if(360<=a[2]-a[0])c=-180,e=180;else if(c>e){var f=this.getClusters([c,d,180,g],b);d=this.getClusters([-180,d,e,g],b);return f.concat(d)}b=this.trees[this._limitZoom(b)];
|
|
61
|
+
e=b.range(lngX(c),latY(g),lngX(e),latY(d));d=[];for(f of e)e=b.points[f],d.push(e.numPoints?getClusterJSON(e):this.points[e.index]);return d}getChildren(a){var b=this._getOriginId(a),c=this._getOriginZoom(a);let d=this.trees[c];if(!d)throw Error("No cluster with the specified id.");b=d.points[b];if(!b)throw Error("No cluster with the specified id.");b=d.within(b.x,b.y,this.options.radius/(this.options.extent*Math.pow(2,c-1)));c=[];for(let e of b)b=d.points[e],b.parentId===a&&c.push(b.numPoints?getClusterJSON(b):
|
|
62
|
+
this.points[b.index]);if(0===c.length)throw Error("No cluster with the specified id.");return c}getLeaves(a,b,c){let d=[];this._appendLeaves(d,a,b||10,c||0,0);return d}getTile(a,b,c){let d=this.trees[this._limitZoom(a)];a=Math.pow(2,a);let {extent:e,radius:g}=this.options,f=g/e,k=(c-f)/a,l=(c+1+f)/a,h={features:[]};this._addTileFeatures(d.range((b-f)/a,k,(b+1+f)/a,l),d.points,b,c,a,h);0===b&&this._addTileFeatures(d.range(1-f/a,k,1,l),d.points,a,c,a,h);b===a-1&&this._addTileFeatures(d.range(0,k,f/
|
|
63
|
+
a,l),d.points,-1,c,a,h);return h.features.length?h:null}getClusterExpansionZoom(a){let b=this._getOriginZoom(a)-1;for(;b<=this.options.maxZoom;){a=this.getChildren(a);b++;if(1!==a.length)break;a=a[0].properties.cluster_id}return b}_appendLeaves(a,b,c,d,e){b=this.getChildren(b);for(let g of b)if((b=g.properties)&&b.cluster?e=e+b.point_count<=d?e+b.point_count:this._appendLeaves(a,b.cluster_id,c,d,e):e<d?e++:a.push(g),a.length===c)break;return e}_addTileFeatures(a,b,c,d,e,g){for(let l of a){a=b[l];
|
|
64
|
+
let h=a.numPoints;var f=void 0;let m;var k=void 0;h?(f=getClusterProperties(a),m=a.x,k=a.y):(k=this.points[a.index],f=k.properties,m=lngX(k.geometry.coordinates[0]),k=latY(k.geometry.coordinates[1]));f={type:1,geometry:[[Math.round(this.options.extent*(m*e-c)),Math.round(this.options.extent*(k*e-d))]],tags:f};let n;h?n=a.id:this.options.generateId?n=a.index:this.points[a.index].id&&(n=this.points[a.index].id);void 0!==n&&(f.id=n);g.features.push(f)}}_limitZoom(a){return Math.max(this.options.minZoom,
|
|
65
|
+
Math.min(Math.floor(+a),this.options.maxZoom+1))}_cluster(a,b){let c=[],{radius:d,extent:e,reduce:g,minPoints:f}=this.options,k=d/(e*Math.pow(2,b));for(let d=0;d<a.length;d++){var l=a[d];if(l.zoom<=b)continue;l.zoom=b;let e=this.trees[b+1];var h=e.within(l.x,l.y,k),m=l.numPoints||1;let p=m;for(let a of h){var n=e.points[a];n.zoom>b&&(p+=n.numPoints||1)}if(p>m&&p>=f){n=l.x*m;let a=l.y*m;m=g&&1<m?this._map(l,!0):null;let f=(d<<5)+(b+1)+this.points.length;for(let c of h){h=e.points[c];if(h.zoom<=b)continue;
|
|
66
|
+
h.zoom=b;let d=h.numPoints||1;n+=h.x*d;a+=h.y*d;h.parentId=f;g&&(m||(m=this._map(l,!0)),g(m,this._map(h)))}l.parentId=f;c.push(createCluster(n/p,a/p,f,p,m))}else if(c.push(l),1<p)for(let a of h)l=e.points[a],l.zoom<=b||(l.zoom=b,c.push(l))}return c}_getOriginId(a){return a-this.points.length>>5}_getOriginZoom(a){return(a-this.points.length)%32}_map(a,b){if(a.numPoints)return b?extend$1({},a.properties):a.properties;a=this.points[a.index].properties;let c=this.options.map(a);return b&&c===a?extend$1({},
|
|
67
|
+
c):c}}function createCluster(a,b,c,d,e){return{x:fround(a),y:fround(b),zoom:Infinity,id:c,parentId:-1,numPoints:d,properties:e}}function createPointCluster(a,b){let [c,d]=a.geometry.coordinates;return{x:fround(lngX(c)),y:fround(latY(d)),zoom:Infinity,index:b,parentId:-1}}function getClusterJSON(a){return{type:"Feature",id:a.id,properties:getClusterProperties(a),geometry:{type:"Point",coordinates:[xLng(a.x),yLat(a.y)]}}}
|
|
68
|
+
function getClusterProperties(a){let b=a.numPoints,c=1E4<=b?`${Math.round(b/1E3)}k`:1E3<=b?`${Math.round(b/100)/10}k`:b;return extend$1(extend$1({},a.properties),{cluster:!0,cluster_id:a.id,point_count:b,point_count_abbreviated:c})}function lngX(a){return a/360+.5}function latY(a){a=Math.sin(a*Math.PI/180);a=.5-.25*Math.log((1+a)/(1-a))/Math.PI;return 0>a?0:1<a?1:a}function xLng(a){return 360*(a-.5)}function yLat(a){return 360*Math.atan(Math.exp((180-360*a)*Math.PI/180))/Math.PI-90}
|
|
69
|
+
function extend$1(a,b){for(let c in b)a[c]=b[c];return a}function getX(a){return a.x}function getY(a){return a.y}
|
|
70
|
+
var fastDeepEqual=function equal(a,b){if(a===b)return!0;if(a&&b&&"object"==typeof a&&"object"==typeof b){if(a.constructor!==b.constructor)return!1;var d;if(Array.isArray(a)){var e=a.length;if(e!=b.length)return!1;for(d=e;0!==d--;)if(!equal(a[d],b[d]))return!1;return!0}if(a.constructor===RegExp)return a.source===b.source&&a.flags===b.flags;if(a.valueOf!==Object.prototype.valueOf)return a.valueOf()===b.valueOf();if(a.toString!==Object.prototype.toString)return a.toString()===b.toString();var g=Object.keys(a);
|
|
71
|
+
e=g.length;if(e!==Object.keys(b).length)return!1;for(d=e;0!==d--;)if(!Object.prototype.hasOwnProperty.call(b,g[d]))return!1;for(d=e;0!==d--;)if(e=g[d],!equal(a[e],b[e]))return!1;return!0}return a!==a&&b!==b};
|
|
72
|
+
function __rest(a,b){var c={},d;for(d in a)Object.prototype.hasOwnProperty.call(a,d)&&0>b.indexOf(d)&&(c[d]=a[d]);if(null!=a&&"function"===typeof Object.getOwnPropertySymbols){var e=0;for(d=Object.getOwnPropertySymbols(a);e<d.length;e++)0>b.indexOf(d[e])&&Object.prototype.propertyIsEnumerable.call(a,d[e])&&(c[d[e]]=a[d[e]])}return c}
|
|
73
|
+
class Cluster{constructor({markers:a,position:b}){this.markers=a;b&&(this._position=b instanceof google.maps.LatLng?b:new google.maps.LatLng(b))}get bounds(){if(0!==this.markers.length||this._position)return this.markers.reduce((a,b)=>a.extend(b.getPosition()),new google.maps.LatLngBounds(this._position,this._position))}get position(){return this._position||this.bounds.getCenter()}get count(){return this.markers.filter(a=>a.getVisible()).length}push(a){this.markers.push(a)}delete(){this.marker&&(this.marker.setMap(null),
|
|
74
|
+
delete this.marker);this.markers.length=0}}class AbstractAlgorithm{constructor({maxZoom:a=16}){this.maxZoom=a}noop({markers:a}){return noop(a)}}let noop=a=>a.map(a=>new Cluster({position:a.getPosition(),markers:[a]}));
|
|
75
|
+
class SuperClusterAlgorithm extends AbstractAlgorithm{constructor(a){var {maxZoom:b,radius:c=60}=a;a=__rest(a,["maxZoom","radius"]);super({maxZoom:b});this.superCluster=new Supercluster(Object.assign({maxZoom:this.maxZoom,radius:c},a));this.state={zoom:null}}calculate(a){let b=!1;if(!fastDeepEqual(a.markers,this.markers)){b=!0;this.markers=[...a.markers];var c=this.markers.map(a=>({type:"Feature",geometry:{type:"Point",coordinates:[a.getPosition().lng(),a.getPosition().lat()]},properties:{marker:a}}));
|
|
76
|
+
this.superCluster.load(c)}c={zoom:a.map.getZoom()};b||this.state.zoom>this.maxZoom&&c.zoom>this.maxZoom||(b=b||!fastDeepEqual(this.state,c));this.state=c;b&&(this.clusters=this.cluster(a));return{clusters:this.clusters,changed:b}}cluster({map:a}){return this.superCluster.getClusters([-180,-90,180,90],Math.round(a.getZoom())).map(this.transformCluster.bind(this))}transformCluster({geometry:{coordinates:[a,b]},properties:c}){if(c.cluster)return new Cluster({markers:this.superCluster.getLeaves(c.cluster_id,
|
|
77
|
+
Infinity).map(a=>a.properties.marker),position:new google.maps.LatLng({lat:b,lng:a})});a=c.marker;return new Cluster({markers:[a],position:a.getPosition()})}}class ClusterStats{constructor(a,b){this.markers={sum:a.length};a=b.map(a=>a.count);let c=a.reduce((a,b)=>a+b,0);this.clusters={count:b.length,markers:{mean:c/b.length,sum:c,min:Math.min(...a),max:Math.max(...a)}}}}class DefaultRenderer{render({count:a,position:b},c){c=window.btoa(`
|
|
78
|
+
<svg fill="${a>Math.max(10,c.clusters.markers.mean)?"#ff0000":"#0000ff"}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
|
|
79
|
+
<circle cx="120" cy="120" opacity=".6" r="70" />
|
|
80
|
+
<circle cx="120" cy="120" opacity=".3" r="90" />
|
|
81
|
+
<circle cx="120" cy="120" opacity=".2" r="110" />
|
|
82
|
+
</svg>`);return new google.maps.Marker({position:b,icon:{url:`data:image/svg+xml;base64,${c}`,scaledSize:new google.maps.Size(45,45)},label:{text:String(a),color:"rgba(255,255,255,0.9)",fontSize:"12px"},title:`Cluster of ${a} markers`,zIndex:Number(google.maps.Marker.MAX_ZINDEX)+a})}}function extend(a,b){for(let c in b.prototype)a.prototype[c]=b.prototype[c]}class OverlayViewSafe{constructor(){extend(OverlayViewSafe,google.maps.OverlayView)}}var MarkerClustererEvents;
|
|
83
|
+
(function(a){a.CLUSTERING_BEGIN="clusteringbegin";a.CLUSTERING_END="clusteringend";a.CLUSTER_CLICK="click"})(MarkerClustererEvents||(MarkerClustererEvents={}));let defaultOnClusterClickHandler=(a,b,c)=>{c.fitBounds(b.bounds)};
|
|
84
|
+
class MarkerClusterer extends OverlayViewSafe{constructor({map:a,markers:b=[],algorithm:c=new SuperClusterAlgorithm({}),renderer:d=new DefaultRenderer,onClusterClick:e=defaultOnClusterClickHandler}){super();this.markers=[...b];this.clusters=[];this.algorithm=c;this.renderer=d;this.onClusterClick=e;a&&this.setMap(a)}addMarker(a,b){this.markers.includes(a)||(this.markers.push(a),b||this.render())}addMarkers(a,b){a.forEach(a=>{this.addMarker(a,!0)});b||this.render()}removeMarker(a,b){let c=this.markers.indexOf(a);
|
|
85
|
+
if(-1===c)return!1;a.setMap(null);this.markers.splice(c,1);b||this.render();return!0}removeMarkers(a,b){let c=!1;a.forEach(a=>{c=this.removeMarker(a,!0)||c});c&&!b&&this.render();return c}clearMarkers(a){this.markers.length=0;a||this.render()}render(){let a=this.getMap();if(a instanceof google.maps.Map&&this.getProjection()){google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_BEGIN,this);let {clusters:b,changed:c}=this.algorithm.calculate({markers:this.markers,map:a,mapCanvasProjection:this.getProjection()});
|
|
86
|
+
if(c||void 0==c)this.reset(),this.clusters=b,this.renderClusters();google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){this.idleListener=this.getMap().addListener("idle",this.render.bind(this));this.render()}onRemove(){google.maps.event.removeListener(this.idleListener);this.reset()}reset(){this.markers.forEach(a=>a.setMap(null));this.clusters.forEach(a=>a.delete());this.clusters=[]}renderClusters(){let a=new ClusterStats(this.markers,this.clusters),b=this.getMap();
|
|
87
|
+
this.clusters.forEach(c=>{1===c.markers.length?c.marker=c.markers[0]:(c.marker=this.renderer.render(c,a),this.onClusterClick&&c.marker.addListener("click",a=>{google.maps.event.trigger(this,MarkerClustererEvents.CLUSTER_CLICK,c);this.onClusterClick(a,c,b)}));c.marker.setMap(b)})}}let markerClusterEvents=Object.values(MarkerClustererEvents);
|
|
88
|
+
var MarkerCluster=vue.defineComponent({name:"MarkerCluster",props:{options:{type:Object,default:()=>({})}},emits:markerClusterEvents,setup(a,{emit:b,expose:c,slots:d}){let e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref());vue.provide(markerClusterSymbol,e);vue.watch(g,()=>{g.value&&(e.value=vue.markRaw(new MarkerClusterer({map:g.value,...a.options})),markerClusterEvents.forEach(a=>{var c;null===(c=e.value)||void 0===c?void 0:c.addListener(a,c=>b(a,c))}))},{immediate:!0});
|
|
89
|
+
vue.onBeforeUnmount(()=>{var a;e.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value),e.value.clearMarkers(),e.value.setMap(null))});c({markerCluster:e});return()=>{var a;return null===(a=d.default)||void 0===a?void 0:a.call(d)}}}),_sfc_main=vue.defineComponent({props:{options:{type:Object,required:!0}},setup(a,{slots:b,emit:c}){let d=vue.ref(),e=vue.ref(),g=vue.computed(()=>{var a;return null===(a=b.default)||void 0===a?void 0:a.call(b).some(a=>a.type!==vue.Comment)}),
|
|
90
|
+
f=vue.computed(()=>({...a.options,element:d.value}));vue.onMounted(()=>{e=useSetupMapComponent(customMarkerClassSymbol,[],f,c)});return{customMarkerRef:d,customMarker:e,hasSlotContent:g}}}),css_248z="\n.custom-marker-content[data-v-b9d5ec8a] {\n display: none;\n}\n.mapdiv .custom-marker-content[data-v-b9d5ec8a] {\n display: inline-block;\n}\n";styleInject(css_248z);
|
|
91
|
+
let _withId=vue.withScopeId("data-v-b9d5ec8a"),_sfc_render=_withId((a,b,c,d,e,g)=>a.hasSlotContent?(vue.openBlock(),vue.createBlock("div",{key:0,ref:"customMarkerRef",class:"custom-marker-content",style:{cursor:a.$attrs.onClick?"pointer":void 0}},[vue.renderSlot(a.$slots,"default",{},void 0,!0)],4)):vue.createCommentVNode("v-if",!0));_sfc_main.render=_sfc_render;_sfc_main.__scopeId="data-v-b9d5ec8a";exports.Circle=Circle;exports.CustomControl=_sfc_main$2;exports.CustomMarker=_sfc_main;
|
|
92
|
+
exports.GoogleMap=_sfc_main$3;exports.InfoWindow=_sfc_main$1;exports.Marker=Marker;exports.MarkerCluster=MarkerCluster;exports.Polygon=Polygon;exports.Polyline=Polyline;exports.Rectangle=Rectangle
|