Vue3使用腾讯地图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
index.html
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=your key"></script>
MapContainer.vue
<!-- 将高德地图转成腾讯地图 -->
<template>
<a-select v-model:value="addressValue" show-search placeholder="请输入详细地址" :default-active-first-option="false"
:show-arrow="false" style="width: 100%" :filter-option="false" :fieldNames="{ label: 'address', value: 'id' }"
:not-found-content="searchValueObj.fetching ? undefined : null" :options="searchValueObj.data" @search="toSearch"
@change="handleChange">
<template v-if="searchValueObj.fetching" #notFoundContent>
<a-spin size="small" />
</template>
</a-select>
<div id="myMap" class="myMap"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineExpose, reactive } from "vue";
import { debounce } from 'lodash-es';
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
disabled: {
type: Boolean,
default: false,
},
})
const emits = defineEmits(['handleChange'])
const route = useRoute();
const router = useRouter();
const container = ref(null)
const lasMarker = ref(null)
const locationCurrent = ref({})
let placeSearch = {}
let map = {}
let searchValueObj = reactive({
data: [],
fetching: false,
})
const addressValue = ref(undefined)
// 初始化地图
const initMap = () => {
let center = new qq.maps.LatLng(39.916527, 116.397128);
const type = route.params.type
const id = route.params.id
const options = {
zoom: 16,
mapTypeId: qq.maps.MapTypeId.ROADMAP,
viewMode: '2D',
disableDefaultUI: true
}
map = new qq.maps.Map(document.getElementById('myMap'), options);
// 如果是新增的话获取当前位置
if (type === 'edit') {
// 详情
Core.Api.Merchant.detail({
page: [id]
}).then(res => {
// debugger
console.log(res, '详情')
const { latitude, longitude, address } = res
const currentLocation = new qq.maps.LatLng(latitude, longitude);
setMapMarker(currentLocation)
setCurrentAddress(address, { lat: latitude, lng: longitude })
})
} else {
// 如果是新增使用当前位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
const currentLocation = new qq.maps.LatLng(latitude, longitude);
setMapMarker(currentLocation)
setCurrentAddress(undefined, { lat: latitude, lng: longitude })
});
}
}
// 如果是编辑回显详情位置
}
// 搜索功能
const toSearch = debounce((value) => {
if (value) {
searchValueObj.fetching = true
// 请求后端接口
后端接口({
path: 'ws/place/v1/suggestion',
method: 'GET',
enableCache: true,
param: {
keyword: value
}
}).then(res => {
searchValueObj.fetching = false
searchValueObj.data = res.data
})
}
}, 300);
// 选中地址 设置当前点位
const handleChange = (changeValue, object) => {
const { lat, lng } = object.location
setCurrentAddress(object.address, object.location)
const mapsObject = new qq.maps.LatLng(lat, lng)
setMapMarker(mapsObject)
}
// 放置地图点位
const setMapMarker = (locationObj) => {
// 先清空点位再设置点位
// map.setMap(null)
map.setCenter(locationObj)
let marker = new qq.maps.Marker({
position: locationObj,
map: map,
draggable: true
});
let anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon)
qq.maps.event.addListener(marker, 'dragend', changeAddress);
}
// 拖曳点位并且获取地址 逆地址编码
const changeAddress = (location) => {
// 请求后端接口
后端接口({
path: 'ws/geocoder/v1/',
method: 'GET',
enableCache: true,
param: {
location: location.latLng.lat + ',' + location.latLng.lng,
}
}).then(res => {
setCurrentAddress(res.result.address, res.result.location)
})
}
// 设置地址放置当前点位
const setCurrentAddress = (address, location) => {
addressValue.value = address
locationCurrent.value = location
// 抛出
emits('locationAddress', { address, location })
}
// 处理回显
const mapPreview = (val) => {
};
onMounted(() => {
initMap();
});
onUnmounted(() => {
});
</script>
<style scoped>
.myMap {
/*地图(容器)显示大小*/
width: 100%;
height: 215px;
}
.rowmap {
margin-bottom: 24px;
}
.mapcon {
height: 215px;
}
</style>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)