高德地图API
1.准备
注册账号，申请应用
https://console.amap.com/dev/key/app
https://lbs.amap.com/api/javascript-api-v2/summary
2.Vue3中使用定位和搜索插件
<template>
<div style="text-align: center; align-items: center">
<el-row>
<el-col :span="24">
<el-input v-model="positionInput"
id="searchInputId"
class="common-layout"
size="small"
placeholder="输入关键词搜索位置"
style="height:25px;width:26%;margin-left:1%;"/>
<el-button>搜索</el-button>
<el-button type="primary" @click="submitPosition()">确定</el-button>
</el-col>
</el-row>
<el-row style="margin-top: 10px; margin-bottom: 10px">
<el-col>
<div>
选中的地址：{{data.position.detailAddress}}
</div>
</el-col>
</el-row>
</div>
<div class="gdmap-container">
<div id="container"></div>
</div>
</template>
<script lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from "element-plus";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
const store = useStore();
const router = useRouter()
const positionInput = ref('');
// Data
const data = reactive({
positionInput:'',
keyword:'',
position:{
}
})
const submitPosition = () => {
if (data.position.detailAddress === '') {
ElMessage.error('请选择地址');
return;
}
console.log(data.position)
sessionStorage.setItem('position', JSON.stringify(data.position))
router.go(-1)
}
/**
* 初始化地图
*/
const initMap = () => {
window._AMapSecurityConfig = {
securityJsCode: "", // 密钥
};
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
'AMap.AutoComplete',
'AMap.PlaceSearch',
'AMap.Geocoder'
], // 需要使用的的插件列表
}).then((AMap) => {
var map = new AMap.Map("container",{
resizeEnable: true,
viewMode: "3D", // 是否为3D地图模式
zoom: 8, // 初始化地图级别
// center: [118,30], // 初始化地图中心点位置
});
// 地理编码插件
var geocoder;
AMap.plugin(["AMap.Geocoder"], function () {
geocoder = new AMap.Geocoder({
radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
extensions: "all" //返回地址描述以及附近兴趣点和道路信息，默认“base”
});
});
// 添加定位插件
AMap.plugin(["AMap.Geolocation"], function () {
var geo = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
needAddress: true,
extensions: 'all'
})
// 添加插件
map.addControl(geo);
// 定位当前位置
geo.getCurrentPosition(<PositionCallback>function (status, result) {
console.log(status);
console.log(result);
if (status === 'complete') {
// 获得详细地址
if (result.formattedAddress === ''){
geocoder.getAddress(new AMap.LngLat(result.position.lng, result.position.lat), function (status, result) {
if (status === 'complete' && result.regeocode) {
var address = result.regeocode.formattedAddress;
console.log('详细地址：', address);
data.position.detailAddress = address;
} else {
console.log('获取详细地址失败');
}
});
}
} else {
ElMessage.error('定位失败');
}
});
// 获取城市信息
geo.getCityInfo(function (status, result) {
if (status == 'complete') {
} else {
ElMessage.error('获取城市失败');
}
});
});
// 搜索自动补全插件
const auto = new AMap.AutoComplete({
pageSize: 5, //每页结果数,默认10
pageIndex: 1, //请求页码，默认1
input: "searchInputId",
});
// 搜索插件
const placeSearch = new AMap.PlaceSearch({
map: map,
panel: "panel",
pageSize: 5, //每页结果数,默认10
pageIndex: 1, //请求页码，默认1
});
auto.on("select",select);
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name, function (status, result){
}); //关键字查询查询
}
// 点击搜索得到的结果
placeSearch.on('markerClick', function (e) {
// 处理用户点击地图标记的操作
console.log(e);
});
})
}
onMounted(() => {
initMap();
});
</script>
<style scoped>
.gdmap-container{
margin-left: 20%;
width: 800px;
height: 800px;
}
#container {
padding: 0px;
margin: 0px;
border:1px solid gray;
width: 100%;
height: 100%;
}
</style>
