1.首先自己去平台申请key和密钥。
2.本代码封装的是一个对话框,替换为自己的key和密钥即可使用。
3.使用流程:
输入关键字,会出现搜索结果列表,
点击某一搜索结果,会定位至当前位置,
然后用鼠标可以精确定位,
精确定位后,点击保存,会在后台打印相关经纬度。
注:感觉代码并不完善,请您自己升级开发。
高德地图api使用有次数限制,调用过多会发短信提示。
<template>
<el-dialog v-model="dialogVisible" title="获取经纬度" width="50%" :close-on-click-modal="false">
<div class="home">
<div id="map-box"></div>
<div class="info-box">
<input v-model="keyword" @change="handleSearch" placeholder="输入关键字搜索" />
<el-tooltip content="点击复制">
<span style="margin: 5px 8px">
经纬度:<span class="copy" style="cursor: pointer" :data-clipboard-text="coord">{{ coord }}</span>
</span>
</el-tooltip>
<div class="list" id="list"></div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="dialogVisible = false"> 取消 </el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { shallowRef, ref, onBeforeUnmount } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import ClipboardJS from 'clipboard';
import { ElSelect, ElOption, ElTooltip } from 'element-plus';
const clipboard = new ClipboardJS('.copy');
const dialogVisible = ref(false);
clipboard.on('success', function (e) {
console.log(e);
console.info('Text:', e.text);
// this.$message.info('复制成功');
e.clearSelection();
});
clipboard.on('error', function (e) {
if (!e.text) {
// this.$message.error('暂无可复制的内容');
}
});
onBeforeUnmount(() => {
clipboard.destroy();
});
interface AMapObj {
Map: any;
Marker: any;
}
const map = shallowRef(null);
const keyword = ref('');
const data = ref([]);
const coord = ref('');
let AMapObj: AMapObj, placeSearch: any, marker: any, geocoder: any;
window._AMapSecurityConfig = {
securityJsCode: '您的密钥',
};
const initMap = () => {
AMapLoader.load({
key: '您的key', // 设置您的key
version: '2.0',
plugins: ['AMap.ToolBar', 'AMap.Driving'],
AMapUI: {
version: '1.1',
plugins: [],
},
Loca: {
version: '2.0.0',
},
})
.then((AMap: AMapObj) => {
// console.log(AMap);
AMapObj = AMap;
map.value = new AMap.Map('map-box', {
viewMode: '2D',
zoom: 10,
zooms: [2, 22],
center: [111.3, 37.5],
});
map.value.on('click', onMapClick);
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.AutoComplete'], () => {
// 缩放条
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
// 定位
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认:true
timeout: 10000, // 超过10秒后停止定位,默认:5s
position: 'RT', // 定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
});
geocoder = new AMap.Geocoder({
city: '全国',
});
map.value.addControl(geolocation);
map.value.addControl(toolbar);
map.value.addControl(scale);
placeSearch = new AMap.PlaceSearch({
city: '全国',
pageSize: 3, // 单页显示结果条数
pageIndex: 1, // 页码
citylimit: false, // 是否强制限制在设置的城市内搜索
autoFitView: true,
panel: 'list',
map: map.value,
});
});
})
.catch((e) => {
console.log(e);
});
};
// 搜索地图
const handleSearch = () => {
placeSearch.search(keyword.value);
};
// 点击地图
const onMapClick = (e: any) => {
coord.value = e.lnglat.lng + ',' + e.lnglat.lat;
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function (status: string, result: any) {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
keyword.value = result.regeocode.formattedAddress;
}
});
drawMarker(e.lnglat);
};
// 点击搜索项
const handleSelect = (item: any) => {
console.log(item);
drawMarker(item.location);
if (item.location != null) {
coord.value = item.location.lng + ',' + item.location.lat;
}
};
// 绘制地点marker
const drawMarker = (location: any) => {
if (location == null) return;
let longitude = location.lng,
latitude = location.lat;
if (marker) {
marker.setMap(null);
}
marker = new AMapObj.Marker({
position: new AMapObj.LngLat(longitude, latitude),
anchor: 'bottom-center',
});
marker.on('click', () => {
coord.value = location;
});
map.value.add(marker);
map.value.setZoomAndCenter(16, [longitude, latitude]);
};
const show = () => {
dialogVisible.value = true;
};
const onSubmit = () => {
console.log(coord.value);
};
defineExpose({
show,
});
nextTick(() => {
initMap();
});
</script>
<style scoped>
.home {
height: 450px;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
.info-box {
position: absolute;
top: 8px;
right: 8px;
width: 300px;
background-color: #1f1f1f;
color: white;
display: flex;
flex-direction: column;
}
#map-box {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.search-dropdown {
max-height: 200px !important;
}
/deep/ .amap-logo {
display: none !important;
}
/deep/ .amap-copyright {
display: none !important;
}
</style>