Vue 3+ts +天地图点击地图获取详细位置
VUE3中如何使用天地图
在index.html的头部引入,注意VUE3版本必须采用JavaScript API 4.0版本的API不然会导致地图加载不出来。
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的秘钥"></script>
加载天地图
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。
<template>
<div>
<el-input v-model="input" disabled placeholder="请选择" />
<div class="map-containera" id="map-containera">
<div id="searchResultPanel" style="border: 1px solid #c0c0c0; width: 150px; height: auto; display: none"></div>
</div>
</div>
</template>
创建地图实例
<script setup lang="ts">
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
const { proxy }: any = getCurrentInstance();
onMounted(() => {
nextTick(() => {
onLoad();
});
});
const input = ref('');
var map: any = null;
const siteInfo = {
longitude: '',
address:'',
latitude: ''
};
var map;
var zoom = 12;
var geocode: any;
const T = (window as any).T;
const onLoad = () => {
//初始化地图对象
map = new T.Map('map-containera');
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(113.84582519531251, 34.039004679044446), zoom);
//允许鼠标滚轮缩放地图
console.log(map);
map.enableScrollWheelZoom();
//允许双击地图放大
map.enableDoubleClickZoom();
//创建对象
geocode = new T.Geocoder();
//监听鼠标点击事件
console.log(T.Event);
map.addEventListener('click', (val: any) => {
// 经纬度
siteInfo.longitude = val.lnglat.lng.toFixed(2);
siteInfo.latitude = val.lnglat.lat.toFixed(2);
let point = [val.containerPoint.x, val.containerPoint.y];
var lnglat = map.containerPointToLngLat(point);
geocode.getLocation(lnglat, searchResult);
});
};
const searchResult = (result: any) => {
if (result.getStatus() == 0) {
siteInfo.address = result.getAddress()
ElMessage.success('已选取经纬度');
var addressComponent = result.getAddressComponent();
emit('getAddress', siteInfo);
} else {
result.getMsg();
}
};
const emit = defineEmits(['getAddress', 'delete', 'closePop']);
</script>
样式
<style lang="scss" scoped>
.map-containera {
width: 100%;
height: 732px;
#map-containera {
width: 100%;
height: 500px;
margin-top: 10px;
}
.map-modal-title {
display: flex;
flex-wrap: wrap;
padding: 10px 10px;
.long-lat-item {
margin-left: 10px;
> span {
padding-right: 5px;
}
.ivu-input-wrapper {
margin-right: 5px;
}
}
}
}
在项目中使用
注册全局组件
在main.ts中注册组件
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/router';
import ElementPlus from 'element-plus';
import zhLang from 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/dist/index.css';
import './css/index.scss'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { createPinia } from "pinia";
import myMap from '@/components/myMap/index.vue'
const app = createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus,{locale:{...zhLang,...locale}});
app.use(pinia);
app.component('myMap',myMap)
app.mount('#app');
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
在项目中使用组件
<template>
<my-window
ref="addModify"
:title="'地图'"
:show="popShow"
:full="true"
:customFooter="true"
@handleOk="LOSEDIA()"
@close="LOSEDIA()"
:customClass="'diaBodyFull'"
>
<template #custom>
<my-map @getAddress="getAddress"></my-map>
</template>
</my-window>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
const props = defineProps<{
popShow: boolean;
}>();
watch(
() => props.popShow,
(newData, oldData) => {}
);
const LOSEDIA = () => {
emit('closePop');
};
const getAddress = (val: any) => {
emit('getAddress', val);
};
const emit = defineEmits(['getAddress', 'delete', 'closePop']);
</script>
示例展示
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggccgb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01