Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-google-map
Advanced tools
vue3-google-map - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
@@ -7,2 +7,29 @@ 'use strict'; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| /** | ||
@@ -275,2 +302,24 @@ * Provides a logical test to see if the passed in event is a LambdaProxy request or just a | ||
| const useSetupMapComponent = (componentName, events, options, emit) => { | ||
| let _component = null; | ||
| const component = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| component.value = _component = new api.value[componentName](Object.assign(Object.assign({}, options.value), { map: map.value })); | ||
| events.forEach(event => { | ||
| _component === null || _component === void 0 ? void 0 : _component.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_component) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_component); | ||
| _component.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| return { component }; | ||
| }; | ||
| var script = vue.defineComponent({ | ||
@@ -322,5 +371,5 @@ props: { | ||
| const { map, api } = useMap(); | ||
| const opts = () => { | ||
| const resolveOptions = () => { | ||
| var _a, _b, _c, _d, _e; | ||
| return ({ | ||
| const opts = { | ||
| backgroundColor: props.backgroundColor, | ||
@@ -330,3 +379,3 @@ center: props.center, | ||
| controlSize: props.controlSize, | ||
| disableDefaultUi: props.disableDefaultUi, | ||
| disableDefaultUI: props.disableDefaultUi, | ||
| disableDoubleClickZoom: props.disableDoubleClickZoom, | ||
@@ -387,3 +436,5 @@ draggable: props.draggable, | ||
| : {}, | ||
| }); | ||
| }; | ||
| Object.keys(opts).forEach(key => opts[key] === undefined && delete opts[key]); | ||
| return opts; | ||
| }; | ||
@@ -393,8 +444,22 @@ // Only run this in a browser env since it needs to use the `document` object | ||
| if (typeof window !== 'undefined') { | ||
| loadNow('places', props.apiKey).then(res => { | ||
| api.value = res.maps; | ||
| map.value = new api.value.Map(mapRef.value, opts()); | ||
| loadNow('places', props.apiKey).then(({ maps }) => { | ||
| const { Map } = (api.value = maps); | ||
| map.value = new Map(mapRef.value, resolveOptions()); | ||
| ready.value = true; | ||
| vue.watch(props, () => { | ||
| map.value = new api.value.Map(mapRef.value, opts()); | ||
| const otherPropsAsRefs = Object.keys(props) | ||
| .filter(key => !['center', 'zoom'].includes(key)) | ||
| .map(key => vue.toRef(props, key)); | ||
| vue.watch([() => props.center, () => props.zoom, ...otherPropsAsRefs], ([center, zoom], [oldCenter, oldZoom]) => { | ||
| var _a, _b, _c; | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| const _d = resolveOptions(), otherOptions = __rest(_d, ["center", "zoom"]); | ||
| (_a = map.value) === null || _a === void 0 ? void 0 : _a.setOptions(otherOptions); | ||
| if (zoom !== undefined && zoom !== oldZoom) { | ||
| (_b = map.value) === null || _b === void 0 ? void 0 : _b.setZoom(zoom); | ||
| } | ||
| if (center) { | ||
| if (!oldCenter || center.lng !== oldCenter.lng || center.lat !== oldCenter.lat) { | ||
| (_c = map.value) === null || _c === void 0 ? void 0 : _c.panTo(center); | ||
| } | ||
| } | ||
| }); | ||
@@ -466,20 +531,4 @@ }); | ||
| setup(props, { emit }) { | ||
| let _marker = null; | ||
| const marker = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| marker.value = _marker = new api.value.Marker(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| markerEvents.forEach(event => { | ||
| _marker === null || _marker === void 0 ? void 0 : _marker.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_marker) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_marker); | ||
| _marker.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = vue.toRef(props, 'options'); | ||
| const marker = useSetupMapComponent('Marker', markerEvents, options, emit); | ||
| return { marker }; | ||
@@ -498,20 +547,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _polyline = null; | ||
| const polyline = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polyline.value = _polyline = new api.value.Polyline(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polylineEvents.forEach(event => { | ||
| _polyline === null || _polyline === void 0 ? void 0 : _polyline.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polyline) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polyline); | ||
| _polyline.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = vue.toRef(props, 'options'); | ||
| const polyline = useSetupMapComponent('Polyline', polylineEvents, options, emit); | ||
| return { polyline }; | ||
@@ -530,20 +563,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _polygon = null; | ||
| const polygon = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polygon.value = _polygon = new api.value.Polygon(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polygonEvents.forEach(event => { | ||
| _polygon === null || _polygon === void 0 ? void 0 : _polygon.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polygon) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polygon); | ||
| _polygon.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = vue.toRef(props, 'options'); | ||
| const polygon = useSetupMapComponent('Polygon', polygonEvents, options, emit); | ||
| return { polygon }; | ||
@@ -562,20 +579,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _rectangle = null; | ||
| const rectangle = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| rectangle.value = _rectangle = new api.value.Rectangle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| rectangleEvents.forEach(event => { | ||
| _rectangle === null || _rectangle === void 0 ? void 0 : _rectangle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_rectangle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_rectangle); | ||
| _rectangle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = vue.toRef(props, 'options'); | ||
| const rectangle = useSetupMapComponent('Rectangle', rectangleEvents, options, emit); | ||
| return { rectangle }; | ||
@@ -594,20 +595,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _circle = null; | ||
| const circle = vue.ref(null); | ||
| const { map, api } = useMap(); | ||
| vue.watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| circle.value = _circle = new api.value.Circle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| circleEvents.forEach(event => { | ||
| _circle === null || _circle === void 0 ? void 0 : _circle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_circle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_circle); | ||
| _circle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = vue.toRef(props, 'options'); | ||
| const circle = useSetupMapComponent('Circle', circleEvents, options, emit); | ||
| return { circle }; | ||
@@ -676,7 +661,1 @@ }, | ||
| exports.Rectangle = Rectangle; | ||
| exports.circleEvents = circleEvents; | ||
| exports.markerEvents = markerEvents; | ||
| exports.polygonEvents = polygonEvents; | ||
| exports.polylineEvents = polylineEvents; | ||
| exports.rectangleEvents = rectangleEvents; | ||
| exports.useMap = useMap; |
@@ -1,1 +0,16 @@ | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var o=e(require("vue"));var t,n,l=(function(e,t){var n;async function l(e,o){return r(e)||await async function(e,o,t={}){if(r(e))return void console.info(`Attempt to add script tag for the "${e}" library in Google Maps ignored as this tag already exists in the DOM${o?" [ "+o+"]":""}`);const n=()=>{var t=document.createElement("script");return t.id=`google-maps-${e}-js`,t.src=function(e,o,t=!0){let n=`https://maps.googleapis.com/maps/api/js?libraries=${e}&sensors=false`;return o&&(n=`${n}&key=${o}`),t&&(n=`${n}&callback=${e}LoaderCallback`),n}(e,o),document.querySelector("head").appendChild(t),new Promise(o=>{window[e+"LoaderCallback"]=()=>{o()}})};return Promise.race(t.timeout?[(async(o=2e3)=>{throw await async function(e){return new Promise(o=>setTimeout(o,e))}(o),new Error(`Timed out waiting for Google API to load [ ${e} / ${o} ]`)})(t.timeout),n()]:[n()])}(e,o),window.google}function r(e,o){const t=document.querySelector(`#google-maps-${e}-js`);return Boolean(t)}Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.Continue=100]="Continue",e[e.Success=200]="Success",e[e.Created=201]="Created",e[e.Accepted=202]="Accepted",e[e.NoContent=204]="NoContent",e[e.MovedPermenantly=301]="MovedPermenantly",e[e.TemporaryRedirect=307]="TemporaryRedirect",e[e.NotModified=304]="NotModified",e[e.BadRequest=400]="BadRequest",e[e.Unauthorized=401]="Unauthorized",e[e.PaymentRequired=402]="PaymentRequired",e[e.Forbidden=403]="Forbidden",e[e.NotFound=404]="NotFound",e[e.MethodNotAllowed=405]="MethodNotAllowed",e[e.RequestTimeout=408]="RequestTimeout",e[e.Conflict=409]="Conflict",e[e.Gone=410]="Gone",e[e.IAmATeapot=418]="IAmATeapot",e[e.UnprocessableEntity=422]="UnprocessableEntity",e[e.TooManyRequests=429]="TooManyRequests",e[e.InternalServerError=500]="InternalServerError",e[e.NotImplemented=501]="NotImplemented",e[e.BadGateway=502]="BadGateway",e[e.ServiceUnavailable=503]="ServiceUnavailable",e[e.GatewayTimeout=504]="GatewayTimeout",e[e.AuthenticationRequired=511]="AuthenticationRequired"}(n||(n={})),Array.isArray||(Array.isArray=function(e){return"[object Array]"===Object.prototype.toString.call(e)});const a=o.default.ref(null),i=o.default.ref(null),s=()=>({map:a,api:i});var u=o.default.defineComponent({props:{apiKey:String,backgroundColor:String,center:Object,clickableIcons:{type:Boolean,default:void 0},controlSize:Number,disableDefaultUi:{type:Boolean,default:void 0},disableDoubleClickZoom:{type:Boolean,default:void 0},draggable:{type:Boolean,default:void 0},draggableCursor:String,draggingCursor:String,fullscreenControl:{type:Boolean,default:void 0},fullscreenControlPosition:String,gestureHandling:String,heading:Number,keyboardShortcuts:{type:Boolean,default:void 0},mapTypeControl:{type:Boolean,default:void 0},mapTypeControlOptions:Object,mapTypeId:{type:[Number,String]},maxZoom:Number,minZoom:Number,noClear:{type:Boolean,default:void 0},panControl:{type:Boolean,default:void 0},panControlPosition:String,restriction:Object,rotateControl:{type:Boolean,default:void 0},rotateControlPosition:String,scaleControl:{type:Boolean,default:void 0},scaleControlStyle:Number,scrollwheel:{type:Boolean,default:void 0},streetView:Object,streetViewControl:{type:Boolean,default:void 0},streetViewControlPosition:String,styles:Array,tilt:Number,zoom:Number,zoomControl:{type:Boolean,default:void 0},zoomControlPosition:String},setup(e){const t=o.default.ref(null),n=o.default.ref(!1),{map:r,api:a}=s(),i=()=>{var o,t,n,l,r;return{backgroundColor:e.backgroundColor,center:e.center,clickableIcons:e.clickableIcons,controlSize:e.controlSize,disableDefaultUi:e.disableDefaultUi,disableDoubleClickZoom:e.disableDoubleClickZoom,draggable:e.draggable,draggableCursor:e.draggableCursor,draggingCursor:e.draggingCursor,fullscreenControl:e.fullscreenControl,fullscreenControlOptions:e.fullscreenControlPosition?{position:null===(o=a.value)||void 0===o?void 0:o.ControlPosition[e.fullscreenControlPosition]}:{},gestureHandling:e.gestureHandling,heading:e.heading,keyboardShortcuts:e.keyboardShortcuts,mapTypeControl:e.mapTypeControl,mapTypeControlOptions:e.mapTypeControlOptions,mapTypeId:e.mapTypeId,maxZoom:e.maxZoom,minZoom:e.minZoom,noClear:e.noClear,panControl:e.panControl,panControlOptions:e.panControlPosition?{position:null===(t=a.value)||void 0===t?void 0:t.ControlPosition[e.panControlPosition]}:{},restriction:e.restriction,rotateControl:e.rotateControl,rotateControlOptions:e.rotateControlPosition?{position:null===(n=a.value)||void 0===n?void 0:n.ControlPosition[e.rotateControlPosition]}:{},scaleControl:e.scaleControl,scaleControlOptions:e.scaleControlStyle?{style:e.scaleControlStyle}:{},scrollwheel:e.scrollwheel,streetView:e.streetView,streetViewControl:e.streetViewControl,streetViewControlOptions:e.streetViewControlPosition?{position:null===(l=a.value)||void 0===l?void 0:l.ControlPosition[e.streetViewControlPosition]}:{},styles:e.styles,tilt:e.tilt,zoom:e.zoom,zoomControl:e.zoomControl,zoomControlOptions:e.zoomControlPosition?{position:null===(r=a.value)||void 0===r?void 0:r.ControlPosition[e.zoomControlPosition]}:{}}};return"undefined"!=typeof window&&l("places",e.apiKey).then(l=>{a.value=l.maps,r.value=new a.value.Map(t.value,i()),n.value=!0,o.default.watch(e,()=>{r.value=new a.value.Map(t.value,i())})}),{mapRef:t,ready:n,map:r,api:a}}});const d={ref:"mapRef"};u.render=function(e,t,n,l,r,a){return o.default.openBlock(),o.default.createBlock("div",d,[o.default.renderSlot(e.$slots,"default")],512)},u.__file="src/components/GoogleMap.vue";const c=["animation_changed","click","dblclick","rightclick","dragstart","dragend","drag","mouseover","mousedown","mouseup","draggable_changed","clickable_changed","cursor_changed","flat_changed","rightclick","zindex_changed","icon_changed","position_changed","shape_changed","title_changed","visible_changed"],p=["click","dblclick","drag","dragend","dragstart","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],v=p,m=p.concat(["bounds_changed"]),f=p.concat(["center_changed","radius_changed"]);var g=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){let n=null;const l=o.default.ref(null),{map:r,api:a}=s();return o.default.watch([r,()=>e.options],(o,i,s)=>{r.value&&a.value&&(l.value=n=new a.value.Marker(Object.assign(Object.assign({},e.options),{map:r.value})),c.forEach(e=>{null==n||n.addListener(e,()=>t(e))})),s(()=>{var e;n&&(null===(e=a.value)||void 0===e||e.event.clearInstanceListeners(n),n.setMap(null))})}),{marker:l}},render:()=>null}),C=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){let n=null;const l=o.default.ref(null),{map:r,api:a}=s();return o.default.watch([r,()=>e.options],(o,i,s)=>{r.value&&a.value&&(l.value=n=new a.value.Polyline(Object.assign(Object.assign({},e.options),{map:r.value})),p.forEach(e=>{null==n||n.addListener(e,()=>t(e))})),s(()=>{var e;n&&(null===(e=a.value)||void 0===e||e.event.clearInstanceListeners(n),n.setMap(null))})}),{polyline:l}},render:()=>null}),y=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){let n=null;const l=o.default.ref(null),{map:r,api:a}=s();return o.default.watch([r,()=>e.options],(o,i,s)=>{r.value&&a.value&&(l.value=n=new a.value.Polygon(Object.assign(Object.assign({},e.options),{map:r.value})),v.forEach(e=>{null==n||n.addListener(e,()=>t(e))})),s(()=>{var e;n&&(null===(e=a.value)||void 0===e||e.event.clearInstanceListeners(n),n.setMap(null))})}),{polygon:l}},render:()=>null}),b=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){let n=null;const l=o.default.ref(null),{map:r,api:a}=s();return o.default.watch([r,()=>e.options],(o,i,s)=>{r.value&&a.value&&(l.value=n=new a.value.Rectangle(Object.assign(Object.assign({},e.options),{map:r.value})),m.forEach(e=>{null==n||n.addListener(e,()=>t(e))})),s(()=>{var e;n&&(null===(e=a.value)||void 0===e||e.event.clearInstanceListeners(n),n.setMap(null))})}),{rectangle:l}},render:()=>null}),h=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){let n=null;const l=o.default.ref(null),{map:r,api:a}=s();return o.default.watch([r,()=>e.options],(o,i,s)=>{r.value&&a.value&&(l.value=n=new a.value.Circle(Object.assign(Object.assign({},e.options),{map:r.value})),f.forEach(e=>{null==n||n.addListener(e,()=>t(e))})),s(()=>{var e;n&&(null===(e=a.value)||void 0===e||e.event.clearInstanceListeners(n),n.setMap(null))})}),{circle:l}},render:()=>null}),w=o.default.defineComponent({props:{position:{type:String,required:!0},index:Number},setup(e){const t=o.default.ref(null),{map:n,api:l}=s();return o.default.watch([n,()=>e.position,()=>e.index],(o,r,a)=>{n.value&&l.value&&(e.index&&(t.value.index=e.index),t.value&&n.value.controls[l.value.ControlPosition[e.position]].push(t.value)),a(()=>{if(n.value&&l.value&&t.value){let e=void 0;n.value.controls[l.value.ControlPosition[r[1]]].forEach((o,n)=>{o===t.value&&(e=n)}),e&&n.value.controls[l.value.ControlPosition[r[1]]].removeAt(e)}})}),{controlRef:t}}});const P={ref:"controlRef"};w.render=function(e,t,n,l,r,a){return o.default.openBlock(),o.default.createBlock("div",P,[o.default.renderSlot(e.$slots,"default")],512)},w.__file="src/components/CustomControl.vue",t.Circle=h,t.CustomControl=w,t.GoogleMap=u,t.Marker=g,t.Polygon=y,t.Polyline=C,t.Rectangle=b,t.circleEvents=f,t.markerEvents=c,t.polygonEvents=v,t.polylineEvents=p,t.rectangleEvents=m,t.useMap=s}(t={exports:{}},t.exports),t.exports),r=(n=l)&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,a=l.Circle,i=l.CustomControl,s=l.GoogleMap,u=l.Marker,d=l.Polygon,c=l.Polyline,p=l.Rectangle,v=l.circleEvents,m=l.markerEvents,f=l.polygonEvents,g=l.polylineEvents,C=l.rectangleEvents,y=l.useMap;exports.Circle=a,exports.CustomControl=i,exports.GoogleMap=s,exports.Marker=u,exports.Polygon=d,exports.Polyline=c,exports.Rectangle=p,exports.circleEvents=v,exports.default=r,exports.markerEvents=m,exports.polygonEvents=f,exports.polylineEvents=g,exports.rectangleEvents=C,exports.useMap=y; | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var o=e(require("vue"));var t,n,r=(function(e,t){var n;async function r(e,o){return l(e)||await async function(e,o,t={}){if(l(e))return void console.info(`Attempt to add script tag for the "${e}" library in Google Maps ignored as this tag already exists in the DOM${o?" [ "+o+"]":""}`);const n=()=>{var t=document.createElement("script");return t.id=`google-maps-${e}-js`,t.src=function(e,o,t=!0){let n=`https://maps.googleapis.com/maps/api/js?libraries=${e}&sensors=false`;return o&&(n=`${n}&key=${o}`),t&&(n=`${n}&callback=${e}LoaderCallback`),n}(e,o),document.querySelector("head").appendChild(t),new Promise(o=>{window[e+"LoaderCallback"]=()=>{o()}})};return Promise.race(t.timeout?[(async(o=2e3)=>{throw await async function(e){return new Promise(o=>setTimeout(o,e))}(o),new Error(`Timed out waiting for Google API to load [ ${e} / ${o} ]`)})(t.timeout),n()]:[n()])}(e,o),window.google}function l(e,o){const t=document.querySelector(`#google-maps-${e}-js`);return Boolean(t)}Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.Continue=100]="Continue",e[e.Success=200]="Success",e[e.Created=201]="Created",e[e.Accepted=202]="Accepted",e[e.NoContent=204]="NoContent",e[e.MovedPermenantly=301]="MovedPermenantly",e[e.TemporaryRedirect=307]="TemporaryRedirect",e[e.NotModified=304]="NotModified",e[e.BadRequest=400]="BadRequest",e[e.Unauthorized=401]="Unauthorized",e[e.PaymentRequired=402]="PaymentRequired",e[e.Forbidden=403]="Forbidden",e[e.NotFound=404]="NotFound",e[e.MethodNotAllowed=405]="MethodNotAllowed",e[e.RequestTimeout=408]="RequestTimeout",e[e.Conflict=409]="Conflict",e[e.Gone=410]="Gone",e[e.IAmATeapot=418]="IAmATeapot",e[e.UnprocessableEntity=422]="UnprocessableEntity",e[e.TooManyRequests=429]="TooManyRequests",e[e.InternalServerError=500]="InternalServerError",e[e.NotImplemented=501]="NotImplemented",e[e.BadGateway=502]="BadGateway",e[e.ServiceUnavailable=503]="ServiceUnavailable",e[e.GatewayTimeout=504]="GatewayTimeout",e[e.AuthenticationRequired=511]="AuthenticationRequired"}(n||(n={})),Array.isArray||(Array.isArray=function(e){return"[object Array]"===Object.prototype.toString.call(e)});const a=o.default.ref(null),i=o.default.ref(null),s=()=>({map:a,api:i}),u=(e,t,n,r)=>{let l=null;const a=o.default.ref(null),{map:i,api:u}=s();return o.default.watch([i,n],(o,s,d)=>{i.value&&u.value&&(a.value=l=new u.value[e](Object.assign(Object.assign({},n.value),{map:i.value})),t.forEach(e=>{null==l||l.addListener(e,()=>r(e))})),d(()=>{var e;l&&(null===(e=u.value)||void 0===e||e.event.clearInstanceListeners(l),l.setMap(null))})}),{component:a}};var d=o.default.defineComponent({props:{apiKey:String,backgroundColor:String,center:Object,clickableIcons:{type:Boolean,default:void 0},controlSize:Number,disableDefaultUi:{type:Boolean,default:void 0},disableDoubleClickZoom:{type:Boolean,default:void 0},draggable:{type:Boolean,default:void 0},draggableCursor:String,draggingCursor:String,fullscreenControl:{type:Boolean,default:void 0},fullscreenControlPosition:String,gestureHandling:String,heading:Number,keyboardShortcuts:{type:Boolean,default:void 0},mapTypeControl:{type:Boolean,default:void 0},mapTypeControlOptions:Object,mapTypeId:{type:[Number,String]},maxZoom:Number,minZoom:Number,noClear:{type:Boolean,default:void 0},panControl:{type:Boolean,default:void 0},panControlPosition:String,restriction:Object,rotateControl:{type:Boolean,default:void 0},rotateControlPosition:String,scaleControl:{type:Boolean,default:void 0},scaleControlStyle:Number,scrollwheel:{type:Boolean,default:void 0},streetView:Object,streetViewControl:{type:Boolean,default:void 0},streetViewControlPosition:String,styles:Array,tilt:Number,zoom:Number,zoomControl:{type:Boolean,default:void 0},zoomControlPosition:String},setup(e){const t=o.default.ref(null),n=o.default.ref(!1),{map:l,api:a}=s(),i=()=>{var o,t,n,r,l;const i={backgroundColor:e.backgroundColor,center:e.center,clickableIcons:e.clickableIcons,controlSize:e.controlSize,disableDefaultUI:e.disableDefaultUi,disableDoubleClickZoom:e.disableDoubleClickZoom,draggable:e.draggable,draggableCursor:e.draggableCursor,draggingCursor:e.draggingCursor,fullscreenControl:e.fullscreenControl,fullscreenControlOptions:e.fullscreenControlPosition?{position:null===(o=a.value)||void 0===o?void 0:o.ControlPosition[e.fullscreenControlPosition]}:{},gestureHandling:e.gestureHandling,heading:e.heading,keyboardShortcuts:e.keyboardShortcuts,mapTypeControl:e.mapTypeControl,mapTypeControlOptions:e.mapTypeControlOptions,mapTypeId:e.mapTypeId,maxZoom:e.maxZoom,minZoom:e.minZoom,noClear:e.noClear,panControl:e.panControl,panControlOptions:e.panControlPosition?{position:null===(t=a.value)||void 0===t?void 0:t.ControlPosition[e.panControlPosition]}:{},restriction:e.restriction,rotateControl:e.rotateControl,rotateControlOptions:e.rotateControlPosition?{position:null===(n=a.value)||void 0===n?void 0:n.ControlPosition[e.rotateControlPosition]}:{},scaleControl:e.scaleControl,scaleControlOptions:e.scaleControlStyle?{style:e.scaleControlStyle}:{},scrollwheel:e.scrollwheel,streetView:e.streetView,streetViewControl:e.streetViewControl,streetViewControlOptions:e.streetViewControlPosition?{position:null===(r=a.value)||void 0===r?void 0:r.ControlPosition[e.streetViewControlPosition]}:{},styles:e.styles,tilt:e.tilt,zoom:e.zoom,zoomControl:e.zoomControl,zoomControlOptions:e.zoomControlPosition?{position:null===(l=a.value)||void 0===l?void 0:l.ControlPosition[e.zoomControlPosition]}:{}};return Object.keys(i).forEach(e=>void 0===i[e]&&delete i[e]),i};return"undefined"!=typeof window&&r("places",e.apiKey).then(({maps:r})=>{const{Map:s}=a.value=r;l.value=new s(t.value,i()),n.value=!0;const u=Object.keys(e).filter(e=>!["center","zoom"].includes(e)).map(t=>o.default.toRef(e,t));o.default.watch([()=>e.center,()=>e.zoom,...u],([e,o],[t,n])=>{var r,a,s;const u= | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function(e,o){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)o.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(t[n[r]]=e[n[r]])}return t}(i(),["center","zoom"]);null===(r=l.value)||void 0===r||r.setOptions(u),void 0!==o&&o!==n&&(null===(a=l.value)||void 0===a||a.setZoom(o)),e&&(t&&e.lng===t.lng&&e.lat===t.lat||null===(s=l.value)||void 0===s||s.panTo(e))})}),{mapRef:t,ready:n,map:l,api:a}}});const c={ref:"mapRef"};d.render=function(e,t,n,r,l,a){return o.default.openBlock(),o.default.createBlock("div",c,[o.default.renderSlot(e.$slots,"default")],512)},d.__file="src/components/GoogleMap.vue";const p=["animation_changed","click","dblclick","rightclick","dragstart","dragend","drag","mouseover","mousedown","mouseup","draggable_changed","clickable_changed","cursor_changed","flat_changed","rightclick","zindex_changed","icon_changed","position_changed","shape_changed","title_changed","visible_changed"],f=["click","dblclick","drag","dragend","dragstart","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],m=f,g=f.concat(["bounds_changed"]),C=f.concat(["center_changed","radius_changed"]);var y=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){const n=o.default.toRef(e,"options");return{marker:u("Marker",p,n,t)}},render:()=>null}),v=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){const n=o.default.toRef(e,"options");return{polyline:u("Polyline",f,n,t)}},render:()=>null}),b=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){const n=o.default.toRef(e,"options");return{polygon:u("Polygon",m,n,t)}},render:()=>null}),h=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){const n=o.default.toRef(e,"options");return{rectangle:u("Rectangle",g,n,t)}},render:()=>null}),P=o.default.defineComponent({props:{options:{type:Object,required:!0}},setup(e,{emit:t}){const n=o.default.toRef(e,"options");return{circle:u("Circle",C,n,t)}},render:()=>null}),w=o.default.defineComponent({props:{position:{type:String,required:!0},index:Number},setup(e){const t=o.default.ref(null),{map:n,api:r}=s();return o.default.watch([n,()=>e.position,()=>e.index],(o,l,a)=>{n.value&&r.value&&(e.index&&(t.value.index=e.index),t.value&&n.value.controls[r.value.ControlPosition[e.position]].push(t.value)),a(()=>{if(n.value&&r.value&&t.value){let e=void 0;n.value.controls[r.value.ControlPosition[l[1]]].forEach((o,n)=>{o===t.value&&(e=n)}),e&&n.value.controls[r.value.ControlPosition[l[1]]].removeAt(e)}})}),{controlRef:t}}});const O={ref:"controlRef"};w.render=function(e,t,n,r,l,a){return o.default.openBlock(),o.default.createBlock("div",O,[o.default.renderSlot(e.$slots,"default")],512)},w.__file="src/components/CustomControl.vue",t.Circle=P,t.CustomControl=w,t.GoogleMap=d,t.Marker=y,t.Polygon=b,t.Polyline=v,t.Rectangle=h}(t={exports:{}},t.exports),t.exports),l=(n=r)&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,a=r.Circle,i=r.CustomControl,s=r.GoogleMap,u=r.Marker,d=r.Polygon,c=r.Polyline,p=r.Rectangle;exports.Circle=a,exports.CustomControl=i,exports.GoogleMap=s,exports.Marker=u,exports.Polygon=d,exports.Polyline=c,exports.Rectangle=p,exports.default=l; |
@@ -1,3 +0,30 @@ | ||
| import { ref, defineComponent, watch, openBlock, createBlock, renderSlot } from 'vue'; | ||
| import { ref, watch, defineComponent, toRef, openBlock, createBlock, renderSlot } from 'vue'; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| /** | ||
@@ -270,2 +297,24 @@ * Provides a logical test to see if the passed in event is a LambdaProxy request or just a | ||
| const useSetupMapComponent = (componentName, events, options, emit) => { | ||
| let _component = null; | ||
| const component = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| component.value = _component = new api.value[componentName](Object.assign(Object.assign({}, options.value), { map: map.value })); | ||
| events.forEach(event => { | ||
| _component === null || _component === void 0 ? void 0 : _component.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_component) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_component); | ||
| _component.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| return { component }; | ||
| }; | ||
| var script = defineComponent({ | ||
@@ -317,5 +366,5 @@ props: { | ||
| const { map, api } = useMap(); | ||
| const opts = () => { | ||
| const resolveOptions = () => { | ||
| var _a, _b, _c, _d, _e; | ||
| return ({ | ||
| const opts = { | ||
| backgroundColor: props.backgroundColor, | ||
@@ -325,3 +374,3 @@ center: props.center, | ||
| controlSize: props.controlSize, | ||
| disableDefaultUi: props.disableDefaultUi, | ||
| disableDefaultUI: props.disableDefaultUi, | ||
| disableDoubleClickZoom: props.disableDoubleClickZoom, | ||
@@ -382,3 +431,5 @@ draggable: props.draggable, | ||
| : {}, | ||
| }); | ||
| }; | ||
| Object.keys(opts).forEach(key => opts[key] === undefined && delete opts[key]); | ||
| return opts; | ||
| }; | ||
@@ -388,8 +439,22 @@ // Only run this in a browser env since it needs to use the `document` object | ||
| if (typeof window !== 'undefined') { | ||
| loadNow('places', props.apiKey).then(res => { | ||
| api.value = res.maps; | ||
| map.value = new api.value.Map(mapRef.value, opts()); | ||
| loadNow('places', props.apiKey).then(({ maps }) => { | ||
| const { Map } = (api.value = maps); | ||
| map.value = new Map(mapRef.value, resolveOptions()); | ||
| ready.value = true; | ||
| watch(props, () => { | ||
| map.value = new api.value.Map(mapRef.value, opts()); | ||
| const otherPropsAsRefs = Object.keys(props) | ||
| .filter(key => !['center', 'zoom'].includes(key)) | ||
| .map(key => toRef(props, key)); | ||
| watch([() => props.center, () => props.zoom, ...otherPropsAsRefs], ([center, zoom], [oldCenter, oldZoom]) => { | ||
| var _a, _b, _c; | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| const _d = resolveOptions(), otherOptions = __rest(_d, ["center", "zoom"]); | ||
| (_a = map.value) === null || _a === void 0 ? void 0 : _a.setOptions(otherOptions); | ||
| if (zoom !== undefined && zoom !== oldZoom) { | ||
| (_b = map.value) === null || _b === void 0 ? void 0 : _b.setZoom(zoom); | ||
| } | ||
| if (center) { | ||
| if (!oldCenter || center.lng !== oldCenter.lng || center.lat !== oldCenter.lat) { | ||
| (_c = map.value) === null || _c === void 0 ? void 0 : _c.panTo(center); | ||
| } | ||
| } | ||
| }); | ||
@@ -461,20 +526,4 @@ }); | ||
| setup(props, { emit }) { | ||
| let _marker = null; | ||
| const marker = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| marker.value = _marker = new api.value.Marker(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| markerEvents.forEach(event => { | ||
| _marker === null || _marker === void 0 ? void 0 : _marker.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_marker) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_marker); | ||
| _marker.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const marker = useSetupMapComponent('Marker', markerEvents, options, emit); | ||
| return { marker }; | ||
@@ -493,20 +542,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _polyline = null; | ||
| const polyline = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polyline.value = _polyline = new api.value.Polyline(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polylineEvents.forEach(event => { | ||
| _polyline === null || _polyline === void 0 ? void 0 : _polyline.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polyline) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polyline); | ||
| _polyline.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const polyline = useSetupMapComponent('Polyline', polylineEvents, options, emit); | ||
| return { polyline }; | ||
@@ -525,20 +558,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _polygon = null; | ||
| const polygon = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polygon.value = _polygon = new api.value.Polygon(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polygonEvents.forEach(event => { | ||
| _polygon === null || _polygon === void 0 ? void 0 : _polygon.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polygon) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polygon); | ||
| _polygon.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const polygon = useSetupMapComponent('Polygon', polygonEvents, options, emit); | ||
| return { polygon }; | ||
@@ -557,20 +574,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _rectangle = null; | ||
| const rectangle = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| rectangle.value = _rectangle = new api.value.Rectangle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| rectangleEvents.forEach(event => { | ||
| _rectangle === null || _rectangle === void 0 ? void 0 : _rectangle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_rectangle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_rectangle); | ||
| _rectangle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const rectangle = useSetupMapComponent('Rectangle', rectangleEvents, options, emit); | ||
| return { rectangle }; | ||
@@ -589,20 +590,4 @@ }, | ||
| setup(props, { emit }) { | ||
| let _circle = null; | ||
| const circle = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| circle.value = _circle = new api.value.Circle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| circleEvents.forEach(event => { | ||
| _circle === null || _circle === void 0 ? void 0 : _circle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_circle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_circle); | ||
| _circle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const circle = useSetupMapComponent('Circle', circleEvents, options, emit); | ||
| return { circle }; | ||
@@ -664,2 +649,2 @@ }, | ||
| export { Circle, script$1 as CustomControl, script as GoogleMap, Marker, Polygon, Polyline, Rectangle, circleEvents, markerEvents, polygonEvents, polylineEvents, rectangleEvents, useMap }; | ||
| export { Circle, script$1 as CustomControl, script as GoogleMap, Marker, Polygon, Polyline, Rectangle }; |
| /// <reference types="googlemaps" /> | ||
| import * as themes from '/@/themes/index'; | ||
| export declare type GoogleMapsAPI = typeof google.maps; | ||
| export declare type IMap = google.maps.Map; | ||
| export declare type IMapOptions = google.maps.MapOptions; | ||
| export declare type ILatLng = google.maps.LatLng; | ||
@@ -22,1 +24,2 @@ export declare type IControlPosition = keyof typeof google.maps.ControlPosition; | ||
| export declare type ICircleOptions = google.maps.CircleOptions; | ||
| export declare type ITheme = keyof typeof themes; |
| export {}; |
@@ -9,27 +9,135 @@ /// <reference types="googlemaps" /> | ||
| }, { | ||
| circle: import("vue").Ref<{ | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| circle: { | ||
| component: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| }; | ||
| }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
@@ -36,0 +144,0 @@ options: google.maps.CircleOptions; |
@@ -1,4 +0,4 @@ | ||
| import { defineComponent, watch, ref } from 'vue'; | ||
| import { useMap } from "../composables/index"; | ||
| import { circleEvents } from "../shared/index"; | ||
| import { defineComponent, toRef } from 'vue'; | ||
| import { useSetupMapComponent } from '/@/composables/index'; | ||
| import { circleEvents } from '/@/shared/index'; | ||
| export default defineComponent({ | ||
@@ -12,20 +12,4 @@ props: { | ||
| setup(props, { emit }) { | ||
| let _circle = null; | ||
| const circle = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| circle.value = _circle = new api.value.Circle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| circleEvents.forEach(event => { | ||
| _circle === null || _circle === void 0 ? void 0 : _circle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_circle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_circle); | ||
| _circle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const circle = useSetupMapComponent('Circle', circleEvents, options, emit); | ||
| return { circle }; | ||
@@ -32,0 +16,0 @@ }, |
| export { default as GoogleMap } from './GoogleMap.vue'; | ||
| export { default as Marker } from "./Marker"; | ||
| export { default as Polyline } from "./Polyline"; | ||
| export { default as Polygon } from "./Polygon"; | ||
| export { default as Rectangle } from "./Rectangle"; | ||
| export { default as Circle } from "./Circle"; | ||
| export { default as Marker } from './Marker'; | ||
| export { default as Polyline } from './Polyline'; | ||
| export { default as Polygon } from './Polygon'; | ||
| export { default as Rectangle } from './Rectangle'; | ||
| export { default as Circle } from './Circle'; | ||
| export { default as CustomControl } from './CustomControl.vue'; |
| export { default as GoogleMap } from './GoogleMap.vue'; | ||
| export { default as Marker } from "./Marker"; | ||
| export { default as Polyline } from "./Polyline"; | ||
| export { default as Polygon } from "./Polygon"; | ||
| export { default as Rectangle } from "./Rectangle"; | ||
| export { default as Circle } from "./Circle"; | ||
| export { default as Marker } from './Marker'; | ||
| export { default as Polyline } from './Polyline'; | ||
| export { default as Polygon } from './Polygon'; | ||
| export { default as Rectangle } from './Rectangle'; | ||
| export { default as Circle } from './Circle'; | ||
| export { default as CustomControl } from './CustomControl.vue'; |
@@ -9,44 +9,135 @@ /// <reference types="googlemaps" /> | ||
| }, { | ||
| marker: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| marker: { | ||
| component: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| }; | ||
| }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
@@ -53,0 +144,0 @@ options: google.maps.MarkerOptions; |
@@ -1,4 +0,4 @@ | ||
| import { defineComponent, watch, ref } from 'vue'; | ||
| import { useMap } from "../composables/index"; | ||
| import { markerEvents } from "../shared/index"; | ||
| import { defineComponent, toRef } from 'vue'; | ||
| import { useSetupMapComponent } from '/@/composables/index'; | ||
| import { markerEvents } from '/@/shared/index'; | ||
| export default defineComponent({ | ||
@@ -12,20 +12,4 @@ props: { | ||
| setup(props, { emit }) { | ||
| let _marker = null; | ||
| const marker = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| marker.value = _marker = new api.value.Marker(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| markerEvents.forEach(event => { | ||
| _marker === null || _marker === void 0 ? void 0 : _marker.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_marker) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_marker); | ||
| _marker.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const marker = useSetupMapComponent('Marker', markerEvents, options, emit); | ||
| return { marker }; | ||
@@ -32,0 +16,0 @@ }, |
@@ -9,26 +9,135 @@ /// <reference types="googlemaps" /> | ||
| }, { | ||
| polygon: import("vue").Ref<{ | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| polygon: { | ||
| component: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| }; | ||
| }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
@@ -35,0 +144,0 @@ options: google.maps.PolygonOptions; |
@@ -1,4 +0,4 @@ | ||
| import { defineComponent, watch, ref } from 'vue'; | ||
| import { useMap } from "../composables/index"; | ||
| import { polygonEvents } from "../shared/index"; | ||
| import { defineComponent, toRef } from 'vue'; | ||
| import { useSetupMapComponent } from '/@/composables/index'; | ||
| import { polygonEvents } from '/@/shared/index'; | ||
| export default defineComponent({ | ||
@@ -12,20 +12,4 @@ props: { | ||
| setup(props, { emit }) { | ||
| let _polygon = null; | ||
| const polygon = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polygon.value = _polygon = new api.value.Polygon(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polygonEvents.forEach(event => { | ||
| _polygon === null || _polygon === void 0 ? void 0 : _polygon.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polygon) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polygon); | ||
| _polygon.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const polygon = useSetupMapComponent('Polygon', polygonEvents, options, emit); | ||
| return { polygon }; | ||
@@ -32,0 +16,0 @@ }, |
@@ -9,24 +9,135 @@ /// <reference types="googlemaps" /> | ||
| }, { | ||
| polyline: import("vue").Ref<{ | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| polyline: { | ||
| component: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| }; | ||
| }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
@@ -33,0 +144,0 @@ options: google.maps.PolylineOptions; |
@@ -1,4 +0,4 @@ | ||
| import { defineComponent, watch, ref } from 'vue'; | ||
| import { useMap } from "../composables/index"; | ||
| import { polylineEvents } from "../shared/index"; | ||
| import { defineComponent, toRef } from 'vue'; | ||
| import { useSetupMapComponent } from '/@/composables/index'; | ||
| import { polylineEvents } from '/@/shared/index'; | ||
| export default defineComponent({ | ||
@@ -12,20 +12,4 @@ props: { | ||
| setup(props, { emit }) { | ||
| let _polyline = null; | ||
| const polyline = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| polyline.value = _polyline = new api.value.Polyline(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| polylineEvents.forEach(event => { | ||
| _polyline === null || _polyline === void 0 ? void 0 : _polyline.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_polyline) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_polyline); | ||
| _polyline.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const polyline = useSetupMapComponent('Polyline', polylineEvents, options, emit); | ||
| return { polyline }; | ||
@@ -32,0 +16,0 @@ }, |
@@ -9,24 +9,135 @@ /// <reference types="googlemaps" /> | ||
| }, { | ||
| rectangle: import("vue").Ref<{ | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| rectangle: { | ||
| component: import("vue").Ref<{ | ||
| getAnimation: () => google.maps.Animation | null | undefined; | ||
| getClickable: () => boolean; | ||
| getCursor: () => string | null | undefined; | ||
| getDraggable: () => boolean | null | undefined; | ||
| getIcon: () => string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null | undefined; | ||
| getLabel: () => google.maps.ReadonlyMarkerLabel | null | undefined; | ||
| getMap: () => google.maps.StreetViewPanorama | google.maps.Map<Element> | null | undefined; | ||
| getOpacity: () => number | null | undefined; | ||
| getPosition: () => google.maps.LatLng | null | undefined; | ||
| getShape: () => google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null | undefined; | ||
| getTitle: () => string | null | undefined; | ||
| getVisible: () => boolean; | ||
| getZIndex: () => number | null | undefined; | ||
| setAnimation: (animation: google.maps.Animation | null) => void; | ||
| setClickable: (flag: boolean) => void; | ||
| setCursor: (cursor: string | null) => void; | ||
| setDraggable: (flag: boolean | null) => void; | ||
| setIcon: (icon: string | google.maps.ReadonlyIcon | google.maps.ReadonlySymbol | null) => void; | ||
| setLabel: (label: string | google.maps.ReadonlyMarkerLabel | null) => void; | ||
| setMap: (map: google.maps.StreetViewPanorama | google.maps.Map<Element> | null) => void; | ||
| setOpacity: (opacity: number | null) => void; | ||
| setOptions: (options: google.maps.ReadonlyMarkerOptions) => void; | ||
| setPosition: (latlng: google.maps.LatLng | google.maps.ReadonlyLatLngLiteral | null) => void; | ||
| setShape: (shape: google.maps.MarkerShapeCircle | google.maps.MarkerShapeRect | google.maps.MarkerShapePoly | null) => void; | ||
| setTitle: (title: string | null) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| setZIndex: (zIndex: number | null) => void; | ||
| addListener: { | ||
| (eventName: google.maps.MarkerChangeOptionEventNames, handler: (this: google.maps.Marker) => void): google.maps.MapsEventListener; | ||
| (eventName: google.maps.MarkerMouseEventNames, handler: (this: google.maps.Marker, event: google.maps.MouseEvent) => void): google.maps.MapsEventListener; | ||
| (eventName: string, handler: (this: google.maps.Marker, ...args: any[]) => void): google.maps.MapsEventListener; | ||
| }; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolylineOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polyline, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getPath: () => google.maps.MVCArray<google.maps.LatLng>; | ||
| getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>; | ||
| getVisible: () => boolean; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.PolygonOptions) => void; | ||
| setPath: (path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]) => void; | ||
| setPaths: (paths: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[] | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[][] | google.maps.LatLngLiteral[][]) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Polygon, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getVisible: () => boolean; | ||
| setBounds: (bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.RectangleOptions) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Rectangle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | { | ||
| getBounds: () => google.maps.LatLngBounds; | ||
| getCenter: () => google.maps.LatLng; | ||
| getDraggable: () => boolean; | ||
| getEditable: () => boolean; | ||
| getMap: () => google.maps.Map<Element>; | ||
| getRadius: () => number; | ||
| getVisible: () => boolean; | ||
| setCenter: (center: google.maps.LatLng | google.maps.LatLngLiteral) => void; | ||
| setDraggable: (draggable: boolean) => void; | ||
| setEditable: (editable: boolean) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
| setOptions: (options: google.maps.CircleOptions) => void; | ||
| setRadius: (radius: number) => void; | ||
| setVisible: (visible: boolean) => void; | ||
| addListener: (eventName: string, handler: google.maps.MVCEventHandler<google.maps.Circle, any[]>) => google.maps.MapsEventListener; | ||
| bindTo: (key: string, target: google.maps.MVCObject, targetKey?: string | undefined, noNotify?: boolean | undefined) => void; | ||
| changed: (key: string) => void; | ||
| get: (key: string) => any; | ||
| notify: (key: string) => void; | ||
| set: (key: string, value: any) => void; | ||
| setValues: (values: any) => void; | ||
| unbind: (key: string) => void; | ||
| unbindAll: () => void; | ||
| } | null>; | ||
| }; | ||
| }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
@@ -33,0 +144,0 @@ options: google.maps.RectangleOptions; |
@@ -1,4 +0,4 @@ | ||
| import { defineComponent, watch, ref } from 'vue'; | ||
| import { useMap } from "../composables/index"; | ||
| import { rectangleEvents } from "../shared/index"; | ||
| import { defineComponent, toRef } from 'vue'; | ||
| import { useSetupMapComponent } from '/@/composables/index'; | ||
| import { rectangleEvents } from '/@/shared/index'; | ||
| export default defineComponent({ | ||
@@ -12,20 +12,4 @@ props: { | ||
| setup(props, { emit }) { | ||
| let _rectangle = null; | ||
| const rectangle = ref(null); | ||
| const { map, api } = useMap(); | ||
| watch([map, () => props.options], (_, __, onInvalidate) => { | ||
| if (map.value && api.value) { | ||
| rectangle.value = _rectangle = new api.value.Rectangle(Object.assign(Object.assign({}, props.options), { map: map.value })); | ||
| rectangleEvents.forEach(event => { | ||
| _rectangle === null || _rectangle === void 0 ? void 0 : _rectangle.addListener(event, () => emit(event)); | ||
| }); | ||
| } | ||
| onInvalidate(() => { | ||
| var _a; | ||
| if (_rectangle) { | ||
| (_a = api.value) === null || _a === void 0 ? void 0 : _a.event.clearInstanceListeners(_rectangle); | ||
| _rectangle.setMap(null); | ||
| } | ||
| }); | ||
| }); | ||
| const options = toRef(props, 'options'); | ||
| const rectangle = useSetupMapComponent('Rectangle', rectangleEvents, options, emit); | ||
| return { rectangle }; | ||
@@ -32,0 +16,0 @@ }, |
| export * from "./useMap"; | ||
| export * from "./useSetupMapComponent"; |
| // #autoindex | ||
| // #region autoindexed files | ||
| // index last changed at: 10th Oct, 2020, 01:10 PM ( GMT-7 ) | ||
| // index last changed at: 10th Oct, 2020, 12:17 AM ( GMT+2 ) | ||
| // export: named; exclusions: index, private. | ||
| // files: useMap. | ||
| // files: useMap, useSetupMapComponent. | ||
| // local file exports | ||
| export * from "./useMap"; | ||
| export * from "./useSetupMapComponent"; | ||
| // Note: | ||
@@ -9,0 +10,0 @@ // ----- |
| /// <reference types="googlemaps" /> | ||
| import { IMap } from "../@types/index"; | ||
| import { IMap } from '/@/@types/index'; | ||
| export declare const useMap: () => { | ||
@@ -58,3 +58,3 @@ map: import("vue").Ref<{ | ||
| getControls: () => google.maps.DrawingMode[]; | ||
| getDrawingMode: () => "Point" | "Polygon" | "LineString" | null; | ||
| getDrawingMode: () => "Polygon" | "Point" | "LineString" | null; | ||
| getFeatureById: (id: string | number) => google.maps.Data.Feature; | ||
@@ -69,3 +69,3 @@ getMap: () => google.maps.Map<Element>; | ||
| setControls: (controls: google.maps.DrawingMode[] | null) => void; | ||
| setDrawingMode: (drawingMode: "Point" | "Polygon" | "LineString" | null) => void; | ||
| setDrawingMode: (drawingMode: "Polygon" | "Point" | "LineString" | null) => void; | ||
| setMap: (map: google.maps.Map<Element> | null) => void; | ||
@@ -72,0 +72,0 @@ setStyle: (style: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions) => void; |
@@ -0,0 +0,0 @@ import { ref } from 'vue'; |
| export * from "./@types/index"; | ||
| export * from "./components/index"; | ||
| export * from "./composables/index"; | ||
| export * from "./shared/index"; |
@@ -1,11 +0,9 @@ | ||
| //#autoindex, exclude: shims-vue.d | ||
| //#autoindex, exclude: shims-vue.d, composables, shared, themes | ||
| // #region autoindexed files | ||
| // index last changed at: 10th Oct, 2020, 01:17 PM ( GMT-7 ) | ||
| // export: named; exclusions: shims-vue.d, index, private. | ||
| // directories: @types, components, composables, shared. | ||
| // index last changed at: 10th Oct, 2020, 03:00 AM ( GMT+2 ) | ||
| // export: named; exclusions: shims-vue.d, composables, shared, themes, index, private. | ||
| // directories: @types, components. | ||
| // directory exports | ||
| export * from "./@types/index"; | ||
| export * from "./components/index"; | ||
| export * from "./composables/index"; | ||
| export * from "./shared/index"; | ||
| // Note: | ||
@@ -12,0 +10,0 @@ // ----- |
@@ -0,0 +0,0 @@ export declare const markerEvents: string[]; |
@@ -0,0 +0,0 @@ export const markerEvents = [ |
| { | ||
| "name": "vue3-google-map", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "license": "MIT", | ||
| "description": "", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/inocan-group/vue3-google-maps.git" | ||
| }, | ||
| "homepage": "https://github.com/inocan-group/vue3-google-maps#readme", | ||
| "description": "A set of composable components for easy use of Google Maps in your Vue 3 projects.", | ||
| "unpkg": "dist/cjs/index.min.js", | ||
@@ -18,5 +23,6 @@ "jsdelivr": "dist/cjs/index.min.js", | ||
| "clear": "rimraf dist/**/*", | ||
| "lint": "yarn tsc", | ||
| "build": "run-s clear autoindex build:lib build:types", | ||
| "build:lib": "node ./build/build cjs es --min", | ||
| "build:types": "echo - Building types && ttsc -P tsconfig.es.json --outDir dist/types --declaration", | ||
| "build:types": "echo - Building types && tsc -P tsconfig.es.json --outDir dist/types --declaration", | ||
| "docs": "npx vitepress dev ./docs", | ||
@@ -29,11 +35,11 @@ "docs:build": "npx vitepress build ./docs" | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^11.1.0", | ||
| "@rollup/plugin-node-resolve": "^9.0.0", | ||
| "@rollup/plugin-commonjs": "^16.0.0", | ||
| "@rollup/plugin-node-resolve": "^10.0.0", | ||
| "@types/google-maps": "^3.2.0", | ||
| "@typescript-eslint/eslint-plugin": "^2.33.0", | ||
| "@typescript-eslint/parser": "^2.33.0", | ||
| "@typescript-eslint/eslint-plugin": "^4.4.0", | ||
| "@typescript-eslint/parser": "^4.4.0", | ||
| "@vue/compiler-sfc": "^3.0.0", | ||
| "@vue/eslint-config-prettier": "^6.0.0", | ||
| "@vue/eslint-config-typescript": "^5.0.2", | ||
| "common-types": "^1.15.8", | ||
| "@vue/eslint-config-typescript": "^7.0.0", | ||
| "common-types": "^1.16.2", | ||
| "cross-env": "^7.0.2", | ||
@@ -51,10 +57,8 @@ "do-devops": "^0.5.4", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-terser": "^5.3.0", | ||
| "rollup-plugin-typescript2": "^0.27.3", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-typescript2": "^0.28.0", | ||
| "rollup-plugin-vue": "^6.0.0-beta.10", | ||
| "ttypescript": "^1.5.12", | ||
| "typescript": "~4.0.3", | ||
| "typescript-transform-paths": "^2.0.1", | ||
| "vite": "^1.0.0-rc.4", | ||
| "vitepress": "^0.6.0", | ||
| "vitepress": "^0.7.0", | ||
| "vue": "3" | ||
@@ -68,2 +72,2 @@ }, | ||
| } | ||
| } | ||
| } |
| # vue3-google-map | ||
| > Composable components for easy use of Google Maps with Vue 3 | ||
@@ -25,4 +26,5 @@ | ||
| ## Usage | ||
| Please refer to the [documentation](https://focused-nobel-8968c7.netlify.app) | ||
| Please refer to the [documentation](https://vue3-google-map.netlify.app/) | ||
| ## Development Setup | ||
@@ -47,5 +49,7 @@ | ||
| ## Contribution | ||
| All contributions are welcome. Before submitting a PR though it would be nice if you created an issue explaining what you want to acheive and why. | ||
| ## License | ||
| [MIT](http://opensource.org/licenses/MIT) |
New alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by60.27%
194053
- Dev dependency count
- decreased by-6.67%
28
- Number of package files
- increased by74.07%
47
- Lines of code
- increased by85.12%
4217
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by8%
54
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes