vue3-google-map 0.15.0 → 0.16.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 +57 -0
- package/dist/index.cjs.js +20 -0
- package/dist/index.es.js +1568 -0
- package/dist/index.umd.js +20 -0
- package/dist/themes/index.cjs.js +1 -0
- package/dist/themes/index.es.js +1294 -0
- package/dist/types/@types/index.d.ts +4 -4
- package/dist/types/components/Circle.d.ts +18 -13
- package/dist/types/components/CustomControl.vue.d.ts +28 -20
- package/dist/types/components/CustomMarker.vue.d.ts +22 -19
- package/dist/types/components/GoogleMap.vue.d.ts +409 -263
- package/dist/types/components/HeatmapLayer.d.ts +24 -21
- package/dist/types/components/InfoWindow.vue.d.ts +24 -17
- package/dist/types/components/Marker.d.ts +18 -13
- package/dist/types/components/MarkerCluster.d.ts +22 -15
- package/dist/types/components/Polygon.d.ts +18 -13
- package/dist/types/components/Polyline.d.ts +18 -13
- package/dist/types/components/Rectangle.d.ts +18 -13
- package/dist/types/components/index.d.ts +11 -11
- package/dist/types/composables/index.d.ts +1 -1
- package/dist/types/composables/useSetupMapComponent.d.ts +10 -10
- package/dist/types/index.d.ts +1 -3
- package/dist/types/shared/index.d.ts +14 -14
- package/dist/{themes/types → types/themes}/aubergine.d.ts +2 -2
- package/dist/{themes/types → types/themes}/dark.d.ts +6 -6
- package/dist/{themes/types → types/themes}/grey.d.ts +2 -2
- package/dist/{themes/types → types/themes}/index.d.ts +8 -8
- package/dist/{themes/types → types/themes}/minimal.d.ts +2 -2
- package/dist/{themes/types → types/themes}/retro.d.ts +2 -2
- package/dist/{themes/types → types/themes}/roadways.d.ts +2 -2
- package/dist/{themes/types → types/themes}/roadwaysMinimal.d.ts +2 -2
- package/dist/{themes/types → types/themes}/ultraLight.d.ts +2 -2
- package/dist/types/utils/index.d.ts +13 -13
- package/package.json +27 -43
- package/dist/cjs/index.js +0 -93
- package/dist/es/index.js +0 -87
- package/dist/themes/es/index.js +0 -28
- package/dist/types/shims-google-maps-d.d.ts +0 -15
package/README.md
CHANGED
|
@@ -21,6 +21,7 @@ Note: Please refer to the [documentation site](https://vue3-google-map.netlify.a
|
|
|
21
21
|
- [Custom Marker](#custom-marker)
|
|
22
22
|
- [Custom Control](#custom-control)
|
|
23
23
|
- [Marker Cluster](#marker-cluster)
|
|
24
|
+
- [Heatmap Layer](#heatmap-layer)
|
|
24
25
|
- [Advanced Usage](#advanced-usage)
|
|
25
26
|
- [Contribution](#contribution)
|
|
26
27
|
- [License](#license)
|
|
@@ -604,6 +605,62 @@ export default defineComponent({
|
|
|
604
605
|
|
|
605
606
|
You can listen for [the following events](https://googlemaps.github.io/js-markerclusterer/enums/MarkerClustererEvents.html) on the `MarkerCluster` component.
|
|
606
607
|
|
|
608
|
+
### Heatmap Layer
|
|
609
|
+
|
|
610
|
+
Use the `HeatmapLayer` component to depict the intensity of data at geographical points on the map. Make sure to include the `visualization` library in the `libraries` prop of the `GoogleMap` component.
|
|
611
|
+
|
|
612
|
+
#### Options
|
|
613
|
+
|
|
614
|
+
You can pass a [HeatmapLayerOptions](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions) object to the `options` prop to configure your heatmap layer. Note that for convenience you can use [LatLngLiteral](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngLiteral)s if you wish for the locations.
|
|
615
|
+
|
|
616
|
+
```vue
|
|
617
|
+
<template>
|
|
618
|
+
<GoogleMap
|
|
619
|
+
api-key="YOUR_GOOGLE_MAPS_API_KEY"
|
|
620
|
+
:libraries="['visualization']"
|
|
621
|
+
style="width: 100%; height: 500px"
|
|
622
|
+
:center="sanFrancisco"
|
|
623
|
+
:zoom="13"
|
|
624
|
+
>
|
|
625
|
+
<HeatmapLayer :options="{ data: heatmapData }" />
|
|
626
|
+
</GoogleMap>
|
|
627
|
+
</template>
|
|
628
|
+
|
|
629
|
+
<script>
|
|
630
|
+
import { defineComponent } from "vue";
|
|
631
|
+
import { GoogleMap, HeatmapLayer } from "vue3-google-map";
|
|
632
|
+
|
|
633
|
+
export default defineComponent({
|
|
634
|
+
components: { GoogleMap, HeatmapLayer },
|
|
635
|
+
setup() {
|
|
636
|
+
const sanFrancisco = { lat: 37.774546, lng: -122.433523 }
|
|
637
|
+
|
|
638
|
+
const heatmapData = [
|
|
639
|
+
{ location: { lat: 37.782, lng: -122.447 }, weight: 0.5 },
|
|
640
|
+
{ lat: 37.782, lng: -122.445 },
|
|
641
|
+
{ location: { lat: 37.782, lng: -122.443 }, weight: 2 },
|
|
642
|
+
{ location: { lat: 37.782, lng: -122.441 }, weight: 3 },
|
|
643
|
+
{ location: { lat: 37.782, lng: -122.439 }, weight: 2 },
|
|
644
|
+
{ lat: 37.782, lng: -122.437 },
|
|
645
|
+
{ location: { lat: 37.782, lng: -122.435 }, weight: 0.5 },
|
|
646
|
+
|
|
647
|
+
{ location: { lat: 37.785, lng: -122.447 }, weight: 3 },
|
|
648
|
+
{ location: { lat: 37.785, lng: -122.445 }, weight: 2 },
|
|
649
|
+
{ lat: 37.785, lng: -122.443 },
|
|
650
|
+
{ location: { lat: 37.785, lng: -122.441 }, weight: 0.5 },
|
|
651
|
+
{ lat: 37.785, lng: -122.439 },
|
|
652
|
+
{ location: { lat: 37.785, lng: -122.437 }, weight: 2 },
|
|
653
|
+
{ location: { lat: 37.785, lng: -122.435 }, weight: 3 },
|
|
654
|
+
];
|
|
655
|
+
|
|
656
|
+
return {
|
|
657
|
+
sanFrancisco,
|
|
658
|
+
heatmapData,
|
|
659
|
+
}
|
|
660
|
+
},
|
|
661
|
+
});
|
|
662
|
+
</script>
|
|
663
|
+
```
|
|
607
664
|
|
|
608
665
|
## Advanced Usage
|
|
609
666
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var d=document.createElement("style");d.appendChild(document.createTextNode(".mapdiv[data-v-7d660dd5]{width:100%;height:100%}.info-window-wrapper[data-v-45a4606d]{display:none}.mapdiv .info-window-wrapper[data-v-45a4606d]{display:inline-block}.custom-marker-wrapper[data-v-c7599d50]{display:none}.mapdiv .custom-marker-wrapper[data-v-c7599d50]{display:inline-block}")),document.head.appendChild(d)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
"use strict";var ce=Object.defineProperty;var ue=(r,e,t)=>e in r?ce(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var B=(r,e,t)=>(ue(r,typeof e!="symbol"?e+"":e,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),b=Symbol("map"),O=Symbol("api"),re=Symbol("marker"),se=Symbol("markerCluster"),T=Symbol("CustomMarker"),ie=Symbol("mapTilesLoaded"),M=["click","dblclick","drag","dragend","dragstart","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"];var de=function r(e,t){if(e===t)return!0;if(e&&t&&typeof e=="object"&&typeof t=="object"){if(e.constructor!==t.constructor)return!1;var o,n,s;if(Array.isArray(e)){if(o=e.length,o!=t.length)return!1;for(n=o;n--!==0;)if(!r(e[n],t[n]))return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===t.toString();if(s=Object.keys(e),o=s.length,o!==Object.keys(t).length)return!1;for(n=o;n--!==0;)if(!Object.prototype.hasOwnProperty.call(t,s[n]))return!1;for(n=o;n--!==0;){var l=s[n];if(!r(e[l],t[l]))return!1}return!0}return e!==e&&t!==t};const G="__googleMapsScriptId";class _{constructor({apiKey:e,channel:t,client:o,id:n=G,libraries:s=[],language:l,region:c,version:a,mapIds:p,nonce:d,retries:u=3,url:f="https://maps.googleapis.com/maps/api/js"}){if(this.CALLBACK="__googleMapsCallback",this.callbacks=[],this.done=!1,this.loading=!1,this.errors=[],this.version=a,this.apiKey=e,this.channel=t,this.client=o,this.id=n||G,this.libraries=s,this.language=l,this.region=c,this.mapIds=p,this.nonce=d,this.retries=u,this.url=f,_.instance){if(!de(this.options,_.instance.options))throw new Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(_.instance.options)}`);return _.instance}_.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>=this.retries+1}createUrl(){let e=this.url;return e+=`?callback=${this.CALLBACK}`,this.apiKey&&(e+=`&key=${this.apiKey}`),this.channel&&(e+=`&channel=${this.channel}`),this.client&&(e+=`&client=${this.client}`),this.libraries.length>0&&(e+=`&libraries=${this.libraries.join(",")}`),this.language&&(e+=`&language=${this.language}`),this.region&&(e+=`®ion=${this.region}`),this.version&&(e+=`&v=${this.version}`),this.mapIds&&(e+=`&map_ids=${this.mapIds.join(",")}`),e}deleteScript(){const e=document.getElementById(this.id);e&&e.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise((e,t)=>{this.loadCallback(o=>{o?t(o.error):e(window.google)})})}loadCallback(e){this.callbacks.push(e),this.execute()}setScript(){if(document.getElementById(this.id)){this.callback();return}const e=this.createUrl(),t=document.createElement("script");t.id=this.id,t.type="text/javascript",t.src=e,t.onerror=this.loadErrorCallback.bind(this),t.defer=!0,t.async=!0,this.nonce&&(t.nonce=this.nonce),document.head.appendChild(t)}reset(){this.deleteScript(),this.done=!1,this.loading=!1,this.errors=[],this.onerrorEvent=null}resetIfRetryingFailed(){this.failed&&this.reset()}loadErrorCallback(e){if(this.errors.push(e),this.errors.length<=this.retries){const t=this.errors.length*Math.pow(2,this.errors.length);console.log(`Failed to load Google Maps script, retrying in ${t} ms.`),setTimeout(()=>{this.deleteScript(),this.setScript()},t)}else this.onerrorEvent=e,this.callback()}setCallback(){window.__googleMapsCallback=this.callback.bind(this)}callback(){this.done=!0,this.loading=!1,this.callbacks.forEach(e=>{e(this.onerrorEvent)}),this.callbacks=[]}execute(){if(this.resetIfRetryingFailed(),this.done)this.callback();else{if(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();return}this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}}function pe(r){return class extends r.OverlayView{constructor(o){super();B(this,"element");B(this,"opts");const{element:n,...s}=o;this.element=n,this.opts=s,this.opts.map&&this.setMap(this.opts.map)}getPosition(){return this.opts.position?this.opts.position instanceof r.LatLng?this.opts.position:new r.LatLng(this.opts.position):null}getVisible(){if(!this.element)return!1;const o=this.element;return o.style.display!=="none"&&o.style.visibility!=="hidden"&&(o.style.opacity===""||Number(o.style.opacity)>.01)}onAdd(){if(!this.element)return;const o=this.getPanes();o&&o.overlayMouseTarget.appendChild(this.element)}draw(){if(!this.element)return;const n=this.getProjection().fromLatLngToDivPixel(this.getPosition());if(n){this.element.style.position="absolute";const s=this.element.offsetHeight,l=this.element.offsetWidth;let c,a;switch(this.opts.anchorPoint){case"TOP_CENTER":c=n.x-l/2,a=n.y;break;case"BOTTOM_CENTER":c=n.x-l/2,a=n.y-s;break;case"LEFT_CENTER":c=n.x,a=n.y-s/2;break;case"RIGHT_CENTER":c=n.x-l,a=n.y-s/2;break;case"TOP_LEFT":c=n.x,a=n.y;break;case"TOP_RIGHT":c=n.x-l,a=n.y;break;case"BOTTOM_LEFT":c=n.x,a=n.y-s;break;case"BOTTOM_RIGHT":c=n.x-l,a=n.y-s;break;default:c=n.x-l/2,a=n.y-s/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(o){this.opts=o,this.draw()}}}let V;const H=["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"],he=i.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,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,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},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:H,setup(r,{emit:e}){const t=i.ref(),o=i.ref(!1),n=i.ref(),s=i.ref(),l=i.ref(!1);i.provide(b,n),i.provide(O,s),i.provide(ie,l);const c=()=>{const u={...r};Object.keys(u).forEach(g=>{u[g]===void 0&&delete u[g]});const m=g=>{var v;return g?{position:(v=s.value)==null?void 0:v.ControlPosition[g]}:{}},h={scaleControlOptions:r.scaleControlStyle?{style:r.scaleControlStyle}:{},panControlOptions:m(r.panControlPosition),zoomControlOptions:m(r.zoomControlPosition),rotateControlOptions:m(r.rotateControlPosition),streetViewControlOptions:m(r.streetViewControlPosition),fullscreenControlOptions:m(r.fullscreenControlPosition),disableDefaultUI:r.disableDefaultUi};return{...u,...h}},a=i.watch([s,n],([u,f])=>{const m=u,h=f;m&&h&&(m.event.addListenerOnce(h,"tilesloaded",()=>{l.value=!0}),setTimeout(a,0))},{immediate:!0}),p=()=>{try{const{apiKey:u,region:f,version:m,language:h,libraries:g}=r;V=new _({apiKey:u,region:f,version:m,language:h,libraries:g})}catch(u){console.error(u)}},d=u=>{s.value=i.markRaw(u.maps),n.value=i.markRaw(new u.maps.Map(t.value,c()));const f=pe(s.value);s.value[T]=f,H.forEach(h=>{var g;(g=n.value)==null||g.addListener(h,v=>e(h,v))}),o.value=!0;const m=Object.keys(r).filter(h=>!["apiPromise","apiKey","version","libraries","region","language","center","zoom"].includes(h)).map(h=>i.toRef(r,h));i.watch([()=>r.center,()=>r.zoom,...m],([h,g],[v,y])=>{var D,U,F;const{center:k,zoom:P,...C}=c();(D=n.value)==null||D.setOptions(C),g!==void 0&&g!==y&&((U=n.value)==null||U.setZoom(g));const I=!v||h.lng!==v.lng||h.lat!==v.lat;h&&I&&((F=n.value)==null||F.panTo(h))})};return i.onMounted(()=>{r.apiPromise&&r.apiPromise instanceof Promise?r.apiPromise.then(d):(p(),V.load().then(d))}),i.onBeforeUnmount(()=>{var u;l.value=!1,n.value&&((u=s.value)==null||u.event.clearInstanceListeners(n.value))}),{mapRef:t,ready:o,map:n,api:s,mapTilesLoaded:l}}});const q=(r,e)=>{const t=r.__vccOpts||r;for(const[o,n]of e)t[o]=n;return t},fe={ref:"mapRef",class:"mapdiv"};function me(r,e,t,o,n,s){return i.openBlock(),i.createElementBlock("div",null,[i.createElementVNode("div",fe,null,512),i.renderSlot(r.$slots,"default",i.normalizeProps(i.guardReactiveProps({ready:r.ready,map:r.map,api:r.api,mapTilesLoaded:r.mapTilesLoaded})),void 0,!0)])}const ge=q(he,[["render",me],["__scopeId","data-v-7d660dd5"]]);function ve(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var ye=function r(e,t){if(e===t)return!0;if(e&&t&&typeof e=="object"&&typeof t=="object"){if(e.constructor!==t.constructor)return!1;var o,n,s;if(Array.isArray(e)){if(o=e.length,o!=t.length)return!1;for(n=o;n--!==0;)if(!r(e[n],t[n]))return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===t.toString();if(s=Object.keys(e),o=s.length,o!==Object.keys(t).length)return!1;for(n=o;n--!==0;)if(!Object.prototype.hasOwnProperty.call(t,s[n]))return!1;for(n=o;n--!==0;){var l=s[n];if(!r(e[l],t[l]))return!1}return!0}return e!==e&&t!==t};const E=ve(ye),Ce=r=>r==="Marker",ke=r=>r===T,x=(r,e,t,o)=>{const n=i.ref(),s=i.inject(b,i.ref()),l=i.inject(O,i.ref()),c=i.inject(se,i.ref()),a=i.computed(()=>!!(c.value&&l.value&&(n.value instanceof l.value.Marker||n.value instanceof l.value[T])));return i.watch([s,t],(p,[d,u])=>{var m,h,g;const f=!E(t.value,u)||s.value!==d;!s.value||!l.value||!f||(n.value?(n.value.setOptions(t.value),a.value&&((m=c.value)==null||m.removeMarker(n.value),(h=c.value)==null||h.addMarker(n.value))):(Ce(r)?n.value=i.markRaw(new l.value[r](t.value)):ke(r)?n.value=i.markRaw(new l.value[r](t.value)):n.value=i.markRaw(new l.value[r]({...t.value,map:s.value})),a.value?(g=c.value)==null||g.addMarker(n.value):n.value.setMap(s.value),e.forEach(v=>{var y;(y=n.value)==null||y.addListener(v,k=>o(v,k))})))},{immediate:!0}),i.onBeforeUnmount(()=>{var p,d;n.value&&((p=l.value)==null||p.event.clearInstanceListeners(n.value),a.value?(d=c.value)==null||d.removeMarker(n.value):n.value.setMap(null))}),n},K=["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"],_e=i.defineComponent({name:"Marker",props:{options:{type:Object,required:!0}},emits:K,setup(r,{emit:e,expose:t,slots:o}){const n=i.toRef(r,"options"),s=x("Marker",K,n,e);return i.provide(re,s),t({marker:s}),()=>{var l;return(l=o.default)==null?void 0:l.call(o)}}}),we=i.defineComponent({name:"Polyline",props:{options:{type:Object,required:!0}},emits:M,setup(r,{emit:e}){const t=i.toRef(r,"options");return{polyline:x("Polyline",M,t,e)}},render:()=>null}),Me=i.defineComponent({name:"Polygon",props:{options:{type:Object,required:!0}},emits:M,setup(r,{emit:e}){const t=i.toRef(r,"options");return{polygon:x("Polygon",M,t,e)}},render:()=>null}),W=M.concat(["bounds_changed"]),be=i.defineComponent({name:"Rectangle",props:{options:{type:Object,required:!0}},emits:W,setup(r,{emit:e}){const t=i.toRef(r,"options");return{rectangle:x("Rectangle",W,t,e)}},render:()=>null}),J=M.concat(["center_changed","radius_changed"]),Oe=i.defineComponent({name:"Circle",props:{options:{type:Object,required:!0}},emits:J,setup(r,{emit:e}){const t=i.toRef(r,"options");return{circle:x("Circle",J,t,e)}},render:()=>null}),xe=i.defineComponent({props:{position:{type:String,required:!0},index:{type:Number,default:1}},emits:["content:loaded"],setup(r,{emit:e}){const t=i.ref(null),o=i.inject(b,i.ref()),n=i.inject(O,i.ref()),s=i.inject(ie,i.ref(!1)),l=i.ref(!1),c=i.watch([s,n,t],([d,u,f])=>{u&&d&&f&&(a(r.position),l.value=!0,e("content:loaded"),setTimeout(c,0))},{immediate:!0}),a=d=>{if(o.value&&n.value&&t.value){const u=n.value.ControlPosition[d];o.value.controls[u].push(t.value)}},p=d=>{if(o.value&&n.value){let u=null;const f=n.value.ControlPosition[d];o.value.controls[f].forEach((m,h)=>{m===t.value&&(u=h)}),u!==null&&o.value.controls[f].removeAt(u)}};return i.onBeforeUnmount(()=>p(r.position)),i.watch(()=>r.position,(d,u)=>{p(u),a(d)}),i.watch(()=>r.index,d=>{d&&t.value&&(t.value.index=r.index)}),{controlRef:t,showContent:l}}}),Pe={ref:"controlRef"};function Se(r,e,t,o,n,s){return i.withDirectives((i.openBlock(),i.createElementBlock("div",Pe,[i.renderSlot(r.$slots,"default")],512)),[[i.vShow,r.showContent]])}const Le=q(xe,[["render",Se]]),X=["closeclick","content_changed","domready","position_changed","visible","zindex_changed"],Ee=i.defineComponent({inheritAttrs:!1,props:{options:{type:Object,default:()=>({})}},emits:X,setup(r,{slots:e,emit:t,expose:o}){const n=i.ref(),s=i.ref(),l=i.inject(b,i.ref()),c=i.inject(O,i.ref()),a=i.inject(re,i.ref());let p;const d=i.computed(()=>{var m;return(m=e.default)==null?void 0:m.call(e).some(h=>h.type!==i.Comment)}),u=m=>{var h;return(h=n.value)==null?void 0:h.open({map:l.value,anchor:a.value,...m})},f=()=>{var m;return(m=n.value)==null?void 0:m.close()};return i.onMounted(()=>{i.watch([l,()=>r.options],([m,h],[g,v])=>{const y=!E(h,v)||l.value!==g;l.value&&c.value&&y&&(n.value?(n.value.setOptions({...h,content:d.value?s.value:h.content}),a.value||u()):(n.value=i.markRaw(new c.value.InfoWindow({...h,content:d.value?s.value:h.content})),a.value?p=a.value.addListener("click",()=>{u()}):u(),X.forEach(k=>{var P;(P=n.value)==null||P.addListener(k,C=>t(k,C))})))},{immediate:!0})}),i.onBeforeUnmount(()=>{var m;p&&p.remove(),n.value&&((m=c.value)==null||m.event.clearInstanceListeners(n.value),f())}),o({infoWindow:n,open:u,close:f}),{infoWindow:n,infoWindowRef:s,hasSlotContent:d,open:u,close:f}}});const Ie={key:0,class:"info-window-wrapper"};function je(r,e,t,o,n,s){return r.hasSlotContent?(i.openBlock(),i.createElementBlock("div",Ie,[i.createElementVNode("div",i.mergeProps({ref:"infoWindowRef"},r.$attrs),[i.renderSlot(r.$slots,"default",{},void 0,!0)],16)])):i.createCommentVNode("",!0)}const $e=q(Ee,[["render",je],["__scopeId","data-v-45a4606d"]]);function N(r,e,t,o,n,s){if(n-o<=t)return;const l=o+n>>1;ae(r,e,l,o,n,s%2),N(r,e,t,o,l-1,s+1),N(r,e,t,l+1,n,s+1)}function ae(r,e,t,o,n,s){for(;n>o;){if(n-o>600){const p=n-o+1,d=t-o+1,u=Math.log(p),f=.5*Math.exp(2*u/3),m=.5*Math.sqrt(u*f*(p-f)/p)*(d-p/2<0?-1:1),h=Math.max(o,Math.floor(t-d*f/p+m)),g=Math.min(n,Math.floor(t+(p-d)*f/p+m));ae(r,e,t,h,g,s)}const l=e[2*t+s];let c=o,a=n;for(S(r,e,o,t),e[2*n+s]>l&&S(r,e,o,n);c<a;){for(S(r,e,c,a),c++,a--;e[2*c+s]<l;)c++;for(;e[2*a+s]>l;)a--}e[2*o+s]===l?S(r,e,o,a):(a++,S(r,e,a,n)),a<=t&&(o=a+1),t<=a&&(n=a-1)}}function S(r,e,t,o){A(r,t,o),A(e,2*t,2*o),A(e,2*t+1,2*o+1)}function A(r,e,t){const o=r[e];r[e]=r[t],r[t]=o}function Re(r,e,t,o,n,s,l){const c=[0,r.length-1,0],a=[];let p,d;for(;c.length;){const u=c.pop(),f=c.pop(),m=c.pop();if(f-m<=l){for(let v=m;v<=f;v++)p=e[2*v],d=e[2*v+1],p>=t&&p<=n&&d>=o&&d<=s&&a.push(r[v]);continue}const h=Math.floor((m+f)/2);p=e[2*h],d=e[2*h+1],p>=t&&p<=n&&d>=o&&d<=s&&a.push(r[h]);const g=(u+1)%2;(u===0?t<=p:o<=d)&&(c.push(m),c.push(h-1),c.push(g)),(u===0?n>=p:s>=d)&&(c.push(h+1),c.push(f),c.push(g))}return a}function Te(r,e,t,o,n,s){const l=[0,r.length-1,0],c=[],a=n*n;for(;l.length;){const p=l.pop(),d=l.pop(),u=l.pop();if(d-u<=s){for(let v=u;v<=d;v++)Y(e[2*v],e[2*v+1],t,o)<=a&&c.push(r[v]);continue}const f=Math.floor((u+d)/2),m=e[2*f],h=e[2*f+1];Y(m,h,t,o)<=a&&c.push(r[f]);const g=(p+1)%2;(p===0?t-n<=m:o-n<=h)&&(l.push(u),l.push(f-1),l.push(g)),(p===0?t+n>=m:o+n>=h)&&(l.push(f+1),l.push(d),l.push(g))}return c}function Y(r,e,t,o){const n=r-t,s=e-o;return n*n+s*s}const qe=r=>r[0],Be=r=>r[1];class Q{constructor(e,t=qe,o=Be,n=64,s=Float64Array){this.nodeSize=n,this.points=e;const l=e.length<65536?Uint16Array:Uint32Array,c=this.ids=new l(e.length),a=this.coords=new s(e.length*2);for(let p=0;p<e.length;p++)c[p]=p,a[2*p]=t(e[p]),a[2*p+1]=o(e[p]);N(c,a,n,0,c.length-1,0)}range(e,t,o,n){return Re(this.ids,this.coords,e,t,o,n,this.nodeSize)}within(e,t,o){return Te(this.ids,this.coords,e,t,o,this.nodeSize)}}const Ae={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:r=>r},R=Math.fround||(r=>e=>(r[0]=+e,r[0]))(new Float32Array(1));class Ne{constructor(e){this.options=L(Object.create(Ae),e),this.trees=new Array(this.options.maxZoom+1)}load(e){const{log:t,minZoom:o,maxZoom:n,nodeSize:s}=this.options;t&&console.time("total time");const l=`prepare ${e.length} points`;t&&console.time(l),this.points=e;let c=[];for(let a=0;a<e.length;a++)e[a].geometry&&c.push(ze(e[a],a));this.trees[n+1]=new Q(c,te,ne,s,Float32Array),t&&console.timeEnd(l);for(let a=n;a>=o;a--){const p=+Date.now();c=this._cluster(c,a),this.trees[a]=new Q(c,te,ne,s,Float32Array),t&&console.log("z%d: %d clusters in %dms",a,c.length,+Date.now()-p)}return t&&console.timeEnd("total time"),this}getClusters(e,t){let o=((e[0]+180)%360+360)%360-180;const n=Math.max(-90,Math.min(90,e[1]));let s=e[2]===180?180:((e[2]+180)%360+360)%360-180;const l=Math.max(-90,Math.min(90,e[3]));if(e[2]-e[0]>=360)o=-180,s=180;else if(o>s){const d=this.getClusters([o,n,180,l],t),u=this.getClusters([-180,n,s,l],t);return d.concat(u)}const c=this.trees[this._limitZoom(t)],a=c.range(j(o),$(l),j(s),$(n)),p=[];for(const d of a){const u=c.points[d];p.push(u.numPoints?ee(u):this.points[u.index])}return p}getChildren(e){const t=this._getOriginId(e),o=this._getOriginZoom(e),n="No cluster with the specified id.",s=this.trees[o];if(!s)throw new Error(n);const l=s.points[t];if(!l)throw new Error(n);const c=this.options.radius/(this.options.extent*Math.pow(2,o-1)),a=s.within(l.x,l.y,c),p=[];for(const d of a){const u=s.points[d];u.parentId===e&&p.push(u.numPoints?ee(u):this.points[u.index])}if(p.length===0)throw new Error(n);return p}getLeaves(e,t,o){t=t||10,o=o||0;const n=[];return this._appendLeaves(n,e,t,o,0),n}getTile(e,t,o){const n=this.trees[this._limitZoom(e)],s=Math.pow(2,e),{extent:l,radius:c}=this.options,a=c/l,p=(o-a)/s,d=(o+1+a)/s,u={features:[]};return this._addTileFeatures(n.range((t-a)/s,p,(t+1+a)/s,d),n.points,t,o,s,u),t===0&&this._addTileFeatures(n.range(1-a/s,p,1,d),n.points,s,o,s,u),t===s-1&&this._addTileFeatures(n.range(0,p,a/s,d),n.points,-1,o,s,u),u.features.length?u:null}getClusterExpansionZoom(e){let t=this._getOriginZoom(e)-1;for(;t<=this.options.maxZoom;){const o=this.getChildren(e);if(t++,o.length!==1)break;e=o[0].properties.cluster_id}return t}_appendLeaves(e,t,o,n,s){const l=this.getChildren(t);for(const c of l){const a=c.properties;if(a&&a.cluster?s+a.point_count<=n?s+=a.point_count:s=this._appendLeaves(e,a.cluster_id,o,n,s):s<n?s++:e.push(c),e.length===o)break}return s}_addTileFeatures(e,t,o,n,s,l){for(const c of e){const a=t[c],p=a.numPoints;let d,u,f;if(p)d=le(a),u=a.x,f=a.y;else{const g=this.points[a.index];d=g.properties,u=j(g.geometry.coordinates[0]),f=$(g.geometry.coordinates[1])}const m={type:1,geometry:[[Math.round(this.options.extent*(u*s-o)),Math.round(this.options.extent*(f*s-n))]],tags:d};let h;p?h=a.id:this.options.generateId?h=a.index:this.points[a.index].id&&(h=this.points[a.index].id),h!==void 0&&(m.id=h),l.features.push(m)}}_limitZoom(e){return Math.max(this.options.minZoom,Math.min(Math.floor(+e),this.options.maxZoom+1))}_cluster(e,t){const o=[],{radius:n,extent:s,reduce:l,minPoints:c}=this.options,a=n/(s*Math.pow(2,t));for(let p=0;p<e.length;p++){const d=e[p];if(d.zoom<=t)continue;d.zoom=t;const u=this.trees[t+1],f=u.within(d.x,d.y,a),m=d.numPoints||1;let h=m;for(const g of f){const v=u.points[g];v.zoom>t&&(h+=v.numPoints||1)}if(h>m&&h>=c){let g=d.x*m,v=d.y*m,y=l&&m>1?this._map(d,!0):null;const k=(p<<5)+(t+1)+this.points.length;for(const P of f){const C=u.points[P];if(C.zoom<=t)continue;C.zoom=t;const I=C.numPoints||1;g+=C.x*I,v+=C.y*I,C.parentId=k,l&&(y||(y=this._map(d,!0)),l(y,this._map(C)))}d.parentId=k,o.push(Ze(g/h,v/h,k,h,y))}else if(o.push(d),h>1)for(const g of f){const v=u.points[g];v.zoom<=t||(v.zoom=t,o.push(v))}}return o}_getOriginId(e){return e-this.points.length>>5}_getOriginZoom(e){return(e-this.points.length)%32}_map(e,t){if(e.numPoints)return t?L({},e.properties):e.properties;const o=this.points[e.index].properties,n=this.options.map(o);return t&&n===o?L({},n):n}}function Ze(r,e,t,o,n){return{x:R(r),y:R(e),zoom:1/0,id:t,parentId:-1,numPoints:o,properties:n}}function ze(r,e){const[t,o]=r.geometry.coordinates;return{x:R(j(t)),y:R($(o)),zoom:1/0,index:e,parentId:-1}}function ee(r){return{type:"Feature",id:r.id,properties:le(r),geometry:{type:"Point",coordinates:[De(r.x),Ue(r.y)]}}}function le(r){const e=r.numPoints,t=e>=1e4?`${Math.round(e/1e3)}k`:e>=1e3?`${Math.round(e/100)/10}k`:e;return L(L({},r.properties),{cluster:!0,cluster_id:r.id,point_count:e,point_count_abbreviated:t})}function j(r){return r/360+.5}function $(r){const e=Math.sin(r*Math.PI/180),t=.5-.25*Math.log((1+e)/(1-e))/Math.PI;return t<0?0:t>1?1:t}function De(r){return(r-.5)*360}function Ue(r){const e=(180-r*360)*Math.PI/180;return 360*Math.atan(Math.exp(e))/Math.PI-90}function L(r,e){for(const t in e)r[t]=e[t];return r}function te(r){return r.x}function ne(r){return r.y}/*! *****************************************************************************
|
|
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
|
+
***************************************************************************** */function Fe(r,e){var t={};for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&e.indexOf(o)<0&&(t[o]=r[o]);if(r!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,o=Object.getOwnPropertySymbols(r);n<o.length;n++)e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(r,o[n])&&(t[o[n]]=r[o[n]]);return t}class Z{constructor({markers:e,position:t}){this.markers=e,t&&(t instanceof google.maps.LatLng?this._position=t:this._position=new google.maps.LatLng(t))}get bounds(){if(!(this.markers.length===0&&!this._position))return this.markers.reduce((e,t)=>e.extend(t.getPosition()),new google.maps.LatLngBounds(this._position,this._position))}get position(){return this._position||this.bounds.getCenter()}get count(){return this.markers.filter(e=>e.getVisible()).length}push(e){this.markers.push(e)}delete(){this.marker&&(this.marker.setMap(null),delete this.marker),this.markers.length=0}}class Ge{constructor({maxZoom:e=16}){this.maxZoom=e}noop({markers:e}){return Ve(e)}}const Ve=r=>r.map(t=>new Z({position:t.getPosition(),markers:[t]}));class He extends Ge{constructor(e){var{maxZoom:t,radius:o=60}=e,n=Fe(e,["maxZoom","radius"]);super({maxZoom:t}),this.superCluster=new Ne(Object.assign({maxZoom:this.maxZoom,radius:o},n)),this.state={zoom:null}}calculate(e){let t=!1;if(!E(e.markers,this.markers)){t=!0,this.markers=[...e.markers];const n=this.markers.map(s=>({type:"Feature",geometry:{type:"Point",coordinates:[s.getPosition().lng(),s.getPosition().lat()]},properties:{marker:s}}));this.superCluster.load(n)}const o={zoom:e.map.getZoom()};return t||this.state.zoom>this.maxZoom&&o.zoom>this.maxZoom||(t=t||!E(this.state,o)),this.state=o,t&&(this.clusters=this.cluster(e)),{clusters:this.clusters,changed:t}}cluster({map:e}){return this.superCluster.getClusters([-180,-90,180,90],Math.round(e.getZoom())).map(this.transformCluster.bind(this))}transformCluster({geometry:{coordinates:[e,t]},properties:o}){if(o.cluster)return new Z({markers:this.superCluster.getLeaves(o.cluster_id,1/0).map(n=>n.properties.marker),position:new google.maps.LatLng({lat:t,lng:e})});{const n=o.marker;return new Z({markers:[n],position:n.getPosition()})}}}class Ke{constructor(e,t){this.markers={sum:e.length};const o=t.map(s=>s.count),n=o.reduce((s,l)=>s+l,0);this.clusters={count:t.length,markers:{mean:n/t.length,sum:n,min:Math.min(...o),max:Math.max(...o)}}}}class We{render({count:e,position:t},o){const n=e>Math.max(10,o.clusters.markers.mean)?"#ff0000":"#0000ff",s=window.btoa(`
|
|
16
|
+
<svg fill="${n}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
|
|
17
|
+
<circle cx="120" cy="120" opacity=".6" r="70" />
|
|
18
|
+
<circle cx="120" cy="120" opacity=".3" r="90" />
|
|
19
|
+
<circle cx="120" cy="120" opacity=".2" r="110" />
|
|
20
|
+
</svg>`);return new google.maps.Marker({position:t,icon:{url:`data:image/svg+xml;base64,${s}`,scaledSize:new google.maps.Size(45,45)},label:{text:String(e),color:"rgba(255,255,255,0.9)",fontSize:"12px"},title:`Cluster of ${e} markers`,zIndex:Number(google.maps.Marker.MAX_ZINDEX)+e})}}function Je(r,e){for(let t in e.prototype)r.prototype[t]=e.prototype[t]}class z{constructor(){Je(z,google.maps.OverlayView)}}var w;(function(r){r.CLUSTERING_BEGIN="clusteringbegin",r.CLUSTERING_END="clusteringend",r.CLUSTER_CLICK="click"})(w||(w={}));const Xe=(r,e,t)=>{t.fitBounds(e.bounds)};class Ye extends z{constructor({map:e,markers:t=[],algorithm:o=new He({}),renderer:n=new We,onClusterClick:s=Xe}){super(),this.markers=[...t],this.clusters=[],this.algorithm=o,this.renderer=n,this.onClusterClick=s,e&&this.setMap(e)}addMarker(e,t){this.markers.includes(e)||(this.markers.push(e),t||this.render())}addMarkers(e,t){e.forEach(o=>{this.addMarker(o,!0)}),t||this.render()}removeMarker(e,t){const o=this.markers.indexOf(e);return o===-1?!1:(e.setMap(null),this.markers.splice(o,1),t||this.render(),!0)}removeMarkers(e,t){let o=!1;return e.forEach(n=>{o=this.removeMarker(n,!0)||o}),o&&!t&&this.render(),o}clearMarkers(e){this.markers.length=0,e||this.render()}render(){const e=this.getMap();if(e instanceof google.maps.Map&&this.getProjection()){google.maps.event.trigger(this,w.CLUSTERING_BEGIN,this);const{clusters:t,changed:o}=this.algorithm.calculate({markers:this.markers,map:e,mapCanvasProjection:this.getProjection()});(o||o==null)&&(this.reset(),this.clusters=t,this.renderClusters()),google.maps.event.trigger(this,w.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(e=>e.setMap(null)),this.clusters.forEach(e=>e.delete()),this.clusters=[]}renderClusters(){const e=new Ke(this.markers,this.clusters),t=this.getMap();this.clusters.forEach(o=>{o.markers.length===1?o.marker=o.markers[0]:(o.marker=this.renderer.render(o,e),this.onClusterClick&&o.marker.addListener("click",n=>{google.maps.event.trigger(this,w.CLUSTER_CLICK,o),this.onClusterClick(n,o,t)})),o.marker.setMap(t)})}}const oe=Object.values(w),Qe=i.defineComponent({name:"MarkerCluster",props:{options:{type:Object,default:()=>({})}},emits:oe,setup(r,{emit:e,expose:t,slots:o}){const n=i.ref(),s=i.inject(b,i.ref()),l=i.inject(O,i.ref());return i.provide(se,n),i.watch(s,()=>{s.value&&(n.value=i.markRaw(new Ye({map:s.value,...r.options})),oe.forEach(c=>{var a;(a=n.value)==null||a.addListener(c,p=>e(c,p))}))},{immediate:!0}),i.onBeforeUnmount(()=>{var c;n.value&&((c=l.value)==null||c.event.clearInstanceListeners(n.value),n.value.clearMarkers(),n.value.setMap(null))}),t({markerCluster:n}),()=>{var c;return(c=o.default)==null?void 0:c.call(o)}}}),et=i.defineComponent({inheritAttrs:!1,props:{options:{type:Object,required:!0}},setup(r,{slots:e,emit:t,expose:o}){const n=i.ref(),s=i.computed(()=>{var a;return(a=e.default)==null?void 0:a.call(e).some(p=>p.type!==i.Comment)}),l=i.computed(()=>({...r.options,element:n.value})),c=x(T,[],l,t);return o({customMarker:c}),{customMarkerRef:n,customMarker:c,hasSlotContent:s}}});const tt={key:0,class:"custom-marker-wrapper"};function nt(r,e,t,o,n,s){return r.hasSlotContent?(i.openBlock(),i.createElementBlock("div",tt,[i.createElementVNode("div",i.mergeProps({ref:"customMarkerRef",style:{cursor:r.$attrs.onClick?"pointer":void 0}},r.$attrs),[i.renderSlot(r.$slots,"default",{},void 0,!0)],16)])):i.createCommentVNode("",!0)}const ot=q(et,[["render",nt],["__scopeId","data-v-c7599d50"]]),rt=i.defineComponent({name:"HeatmapLayer",props:{options:{type:Object,default:()=>({})}},setup(r){const e=i.ref(),t=i.inject(b,i.ref()),o=i.inject(O,i.ref());return i.watch([t,()=>r.options],([n,s],[l,c])=>{var p;const a=!E(s,c)||t.value!==l;if(t.value&&o.value&&a){const d=structuredClone(s);if(d.data&&!(d.data instanceof o.value.MVCArray)){const u=o.value.LatLng;d.data=(p=d.data)==null?void 0:p.map(f=>f instanceof u||"location"in f&&(f.location instanceof u||f.location===null)?f:"location"in f?{...f,location:new u(f.location)}:new u(f))}e.value?e.value.setOptions(d):e.value=i.markRaw(new o.value.visualization.HeatmapLayer({...d,map:t.value}))}},{immediate:!0}),i.onBeforeUnmount(()=>{e.value&&e.value.setMap(null)}),{heatmapLayer:e}},render:()=>null});exports.Circle=Oe;exports.CustomControl=Le;exports.CustomMarker=ot;exports.GoogleMap=ge;exports.HeatmapLayer=rt;exports.InfoWindow=$e;exports.Marker=_e;exports.MarkerCluster=Qe;exports.Polygon=Me;exports.Polyline=we;exports.Rectangle=be;
|