<template>
<div>
<el-dialog width="60%" :before-close="cancel" v-model="props.visible">
<span>
<el-autocomplete v-model="addressKeyword" placeholder="请输入地址,例如临沂人民广场" clearable
style="margin-bottom:20px;width:100%;" :fetch-suggestions="querySearch" @select="handleSelect">
<template #append>
<el-button icon="el-icon-search" @click="getAddressKeyword"></el-button>
</template>
</el-autocomplete>
<div id="container" style="width:100%;height:600px;"></div>
</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import md5 from 'js-md5';
import { jsonp } from 'vue-jsonp'
const markersArray = ref([]);
const restaurants = ref([]);
const map = ref(null);
const getAddress = ref(null);
const getAddCode = ref(null);
const addressKeyword = ref('');
const shopInfo = reactive({
lng: '',
lat: '',
address: ''
});
const props = defineProps({
visible: Boolean,
lng: String,
lat: String
})
onMounted(() => {
nextTick(() => {
init()
})
})
var markerLayer
// 初始化地图
const init = () => {
// 定义地图中心点坐标
var center = new TMap.LatLng(35.05151, 118.34787)
// 定义map变量,调用 TMap.Map() 构造函数创建地图
map.value = new TMap.Map(document.getElementById('container'), {
center: center, // 设置地图中心点坐标
zoom: 13, // 设置地图缩放级别
pitch: 0, // 设置俯仰角
rotation: 0 // 设置地图旋转角度
})
// 获取点击后的地址
map.value.on('click', function (event) {
shopInfo.address = event.poi.name
// 获取点击后的地图坐标并设置Marker
shopInfo.lng = event.latLng.lng
shopInfo.lat = event.latLng.lat
if (markerLayer) {
markerLayer.setGeometries([])
}
markerLayer = new TMap.MultiMarker({
map: map.value,
styles: {
// 点标记样式
marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径
})
}
})
markerLayer.add({
id: shopInfo.lat,
position: new TMap.LatLng(shopInfo.lat, shopInfo.lng)
})
})
if (props.lat && props.lng) {
if (markerLayer) {
markerLayer.setGeometries([])
}
markerLayer = new TMap.MultiMarker({
map: map.value,
styles: {
// 点标记样式
marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径
})
}
})
markerLayer.updateGeometries({
styleId: "marker",
id: props.lat,
position: new TMap.LatLng(props.lat, props.lng)
})
map.value.setCenter(new TMap.LatLng(props.lat, props.lng))
}
}
const querySearch = (queryString, cb) => {
var results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
// 调用 callback 返回建议列表的数据
cb(results)
}
const createFilter = (queryString) => {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
}
const handleSelect = (item) => {
// 腾讯地图文档: https://lbs.qq.com/faq/serverFaq/webServiceKey
// csdn参考:https://blog.csdn.net/tiankonlan/article/details/126363935
let str = `/ws/geocoder/v1/?address=${item || addressKeyword.value}&callback=jsonpCallback&key=${import.meta.env.VITE_APP_TMapKey}&output=jsonp${import.meta.env.VITE_APP_TMapSig}`
let sig = md5(str);
sig = encodeURI(sig)
let getData = {
address: item || addressKeyword.value,
callbackQuery: 'callback',
callbackName: 'jsonpCallback',
output: 'jsonp',
key: import.meta.env.VITE_APP_TMapKey,
sig: sig
}
jsonp('https://apis.map.qq.com/ws/geocoder/v1/', getData).then(response => {
if (response.message === '查询无结果') {
alert('查询无结果')
return false
}
shopInfo.lng = response.result.location.lng
shopInfo.lat = response.result.location.lat
shopInfo.address = item
if (markerLayer) {
markerLayer.setGeometries([])
}
markerLayer = new TMap.MultiMarker({
map: map.value,
styles: {
// 点标记样式
marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径
})
}
})
map.value.setCenter(new TMap.LatLng(shopInfo.lat, shopInfo.lng))
markerLayer.updateGeometries({
id: shopInfo.lat,
position: new TMap.LatLng(shopInfo.lat, shopInfo.lng)
})
}).catch(function (error) {
console.log(error)
})
}
const getAddressKeyword = () => {
handleSelect(addressKeyword.value)
}
const emit = defineEmits(['map-confirm', 'cancel'])
/***
* 确认
*/
const confirm = () => {
let data = JSON.parse(JSON.stringify(shopInfo))
emit('map-confirm', data)
}
/***
* 取消
*/
const cancel = () => {
emit('cancel')
}
</script>
<style lang="scss" scoped>
.serachinput {
width: 300px;
box-sizing: border-box;
padding: 9px;
border: 1px solid #dddee1;
line-height: 20px;
font-size: 16px;
height: 38px;
color: #333;
position: relative;
border-radius: 4px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
}
:deep(.el-dialog__header) {
border-bottom: 0 !important;
}
</style>
vue3使用腾讯地图选择地点
于 2023-10-11 17:26:47 首次发布