vue3引入腾讯地图查询拖拽案例
非常简单的小栗子 \color{pink}{非常简单的小栗子} 非常简单的小栗子
未拖拽
拖拽后
html
<el-row>
<el-col>
<el-form-item label="地点查询">
<div class="flex">
<el-input v-model="addFormField.address" placeholder="请输入地点"></el-input>
<el-button type="primary" @click="searchMap">查询</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="考勤地图">
<div class="map-box">
<b>{{ attendance_address }}</b>
<div id="container"></div>
<img src="http://imgca1.linkunst.com/330109011/20230520/93931source6468342197a24.png" alt="" />
</div>
</el-form-item>
</el-col>
</el-row>
js内容
const state = reactive({
map: null,
lng: '116.397492',
lat: '39.909144',
mapKey: '****-EQVEP-6P5D4-LZRUB-HMES2-6TBQL',
attendance_address: '',
});
//页面加载
onMounted(async () => {
initMap();
//我这里因为是http没办法使用如果是https符合谷歌浏览器同源策略即可获取用户当前经纬度;
//代码我贴出来 希望你们能用到 不用的需要注释掉
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
state.lng = longitude;
state.lat = latitude;
},
error => {
console.log(error);
Message.error('获取位置失败');
}
);
} else {
Message.error('浏览器不支持Geolocation API');
}
});
//查询地图
function searchMap() {
state.map.destroy(); //卸载不然会出现多个地图
initMap(); //实例化
}
//实例化地图
function initMap() {
var center = new TMap.LatLng(state.lat, state.lng); //自己写的经纬度
state.map = new TMap.Map(document.getElementById('container'), {
center: center,
zoom: 13,
draggable: true,
scrollable: true,
doubleClickZoom: true,
showControl: false,
});
//拖拽地图
state.map.addListener('dragend', handleMapDragEnd);
//jsonp获取详细信息
const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${state.addFormField.address}&key=${state.mapKey}&output=jsonp`;
const callbackName = `jsonpCallback_${Date.now()}`;
window[callbackName] = data => {
if (data.status === 310 || data.status === 347) {
Message.info('获取位置失败,请输入详细地址信息');
return;
}
state.lng = data.result.location.lng;
state.lat = data.result.location.lat;
let center = new TMap.LatLng(data.result.location.lat, data.result.location.lng);
state.map.panTo(center);
//逆解析地址
getAddress(data.result.location.lat, data.result.location.lng);
};
const script = document.createElement('script');
script.src = `${url}&callback=${callbackName}`;
document.body.appendChild(script);
}
//拖拽函数
function handleMapDragEnd() {
var center = state.map.getCenter();
var lng = center.lng.toFixed(3);
var lat = center.lat.toFixed(3);
state.lat = lat;
state.lng = lng;
getAddress(lat, lng);
}
//逆解析函数
function getAddress(lat, lng) {
const location = `${lat},${lng}`;
const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${location}&key=${state.mapKey}&output=jsonp`;
const callbackName = `jsonpCallback_${Date.now()}`;
window[callbackName] = data => {
if (data.status === 310 || data.status === 347) {
Message.info('获取位置失败,请输入详细地址信息');
return;
}
state.addFormField.attendance_address = data.result.formatted_addresses.recommend;
};
const script = document.createElement('script');
script.src = `${url}&callback=${callbackName}`;
document.body.appendChild(script);
}