1 line
6.3 KiB
Plaintext
1 line
6.3 KiB
Plaintext
|
{"version":3,"file":"Map.js","sources":["../../../../src/components/Map.vue","../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9jb21wb25lbnRzL01hcC52dWU"],"sourcesContent":["<route lang=\"json5\" type=\"page\">\n{\n layout: 'default',\n style: {\n navigationBarTitleText: '地图组件',\n // 隐藏该组件的头部\n navigationStyle: 'custom',\n },\n}\n</route>\n\n<template>\n <view class=\"objView\">\n <u-row>\n <!-- style内嵌标签的写法才能让app端地图全屏展示 -->\n <u-col span=\"12\">\n <map\n id=\"myMap\"\n ref=\"myMap\"\n :longitude=\"longitude\"\n :latitude=\"latitude\"\n :scale=\"scale\"\n @tap=\"clickmap\"\n :markers=\"covers\"\n style=\"width: 100vw; height: 100%\"\n ></map>\n </u-col>\n </u-row>\n </view>\n</template>\n\n<script setup>\nimport { getMapDetailAddress } from '@/service/mapService'\nimport { toast } from '@/utils/commUtils'\nimport { ref, reactive, watch } from 'vue'\n\n// 定义接收外部传入的经纬度\nconst props = defineProps({\n initialLongitude: {\n type: Number,\n default: null,\n },\n initialLatitude: {\n type: Number,\n default: null,\n },\n iconPath: {\n type: String,\n default: '/static/map/self.png',\n },\n locationName: {\n type: String,\n default: '本地位置',\n },\n})\n\nconst longitude = ref(props.initialLongitude || 0) // 记录实时点击位置\nconst latitude = ref(props.initialLatitude || 0)\nconst originalLongitude = ref(0) // 记录用户当前真实位置随时返回\nconst originalLatitude = ref(0)\nconst scale = ref('16')\nconst geocode = ref(true)\nconst emit = defineEmits(['doneFun'])\n\nconst covers = reactive([\n {\n longitude: longitude.value,\n latitude: latitude.value,\n iconPath: props.iconPath,\n width: 30,\n height: 30,\n label: {\n content: props.locationName,\n textAlign: 'center',\n color: '#FB3109',\n },\n },\n])\n\nconst clickmap = () => {\n uni.chooseLocation({\n success: (res) => {\n longitude.value = res.longitude\n latitude.value = res.latitude\n covers[0].longitude = res.longitude\n covers[0].latitude = res.latitude\n },\n fail: (err) => {\n console.log(err)\n toast('获取位置失败')\n },\n })\n}\n\n// 获取自己的地理位置\nconst getLocation = () => {\n // uni.showLoading({ title: '正在获取定位' })\n uni.getLocation({\n type: 'gcj02',\n timeout: 1000,\n geocode: geocode.value,\n success: (res) => {\n uni.hideLoading()\n longitude.value = res.longitude\n latitude.value = res.latitude\n originalLongitude.value = res.longitude\n originalLatitude.value = res.latitude\n covers[0].longitude = res.longitude\n covers[0].latitude = res.latitude\n // 获取地理位置的详细信息\n getMapDetailAddress(res.longitude, res.latitude).then((mapDetail) => {\n emit('doneFun', mapDetail)\n })\n },\n fail: (err) => {\n console.log(err)\n // uni.hideLoading()\n uni.showModal({\n title: '提示',\n content: '位置信息获取失败（请确定定位功能是否打开）',\n showCancel: false,\n })\n },\n })\n}\n\n// 监听外部传入的经纬度变化\nwatch(\n () => [props.initialLongitude, props.initialLatitude],\n ([newLongitude, newLatitude]) => {\n if (newLongitude !== null) {\n longitude.value = newLongitude\n covers[0].longitude = newLongitude\n }\n if (newLatitude !== null) {\n latitude.value = newLatitude\n covers[0].latitude = newLatitude\n }\n },\n)\n\nonLoad(() => {\n // 如果没有传入经纬度则获取当前定位\n if (longitude.value === 0 && latitude.value === 0) {\n getLocation()\n } else {\n covers[0].longitude = longitude.value\n covers[0].latitude = latitude.value\n getMapDetailAddress(longitude.value, latitude.value).then((mapDetail) => {\n emit('doneFun', mapDetail)\n })\n }\n}
|