vue-tianditu-map
Version:
A Vue 3 component for Tianditu map integration
3 lines (2 loc) • 2.09 kB
JavaScript
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.VueTiandituMap={},a.Vue))})(this,function(a,e){"use strict";const v="",p=((r,d)=>{const n=r.__vccOpts||r;for(const[s,l]of d)n[s]=l;return n})(Object.assign({name:"MapComponent"},{__name:"index",props:{tdtKey:{type:String,required:!0,default:""},center:{type:Array,default:()=>[116.397428,39.90923]},zoom:{type:Number,default:12},mapType:{type:String,default:"vec",validator:r=>["vec","img","ter"].includes(r)}},emits:["map-ready"],setup(r,{emit:d}){const n=r,s=d,l=e.ref(null),o=e.ref(null),m=()=>new Promise((t,i)=>{if(window.T){t();return}const c=document.createElement("script");c.src=`http://api.tianditu.gov.cn/api?v=4.0&tk=${n.tdtKey}`,c.type="text/javascript",c.onload=()=>t(),c.onerror=()=>i(new Error("天地图API加载失败")),document.head.appendChild(c)}),f=()=>{try{o.value=new T.Map("map"),o.value.centerAndZoom(new T.LngLat(n.center[0],n.center[1]),n.zoom),s("map-ready",o.value)}catch(t){console.error("创建地图失败:",t)}},_=()=>{o.value&&(o.value.clearOverLays(),o.value=null)},y=()=>{if(!n.tdtKey){console.error("天地图API密钥不能为空");return}m().then(()=>{f()}).catch(t=>{console.error("加载天地图API失败:",t)})};return e.watch(()=>n.center,t=>{o.value&&t&&o.value.centerAndZoom(new T.LngLat(t[0],t[1]),n.zoom)},{deep:!0}),e.watch(()=>n.zoom,t=>{o.value&&o.value.setZoom(t)}),e.watch(()=>n.mapType,t=>{o.value&&addLayer(t)}),e.onMounted(()=>{e.nextTick(()=>{y()})}),e.onBeforeUnmount(()=>{_()}),(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"map-container",ref_key:"mapContainer",ref:l},i[0]||(i[0]=[e.createElementVNode("div",{id:"map",class:"map-content"},null,-1)]),512))}}),[["__scopeId","data-v-e47a0d63"]]),u={install:r=>{r.component("MapComponent",p)},MapComponent:p};a.MapComponent=p,a.default=u,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=index.umd.js.map