Don't talk much, go straight to work
Before that, you need to have the key of Gaode map, you can apply for it yourself
1. First, you need to install it in the terminal
npm i @amap/amap-jsapi-loader --save
2. Prepare a container
<template>
<div id="container"></div>
</template>
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
3. Introduce the newly installed on the page that needs to be used
import AMapLoader from '@amap/amap-jsapi-loader';
4,
const initMap = () => {
table.maps = true;
AMapLoader.load({
key: 'b85d5c52293171aace0e5c27f86050ca', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '1.4.4', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表
}).then((AMap) => {
const map = new AMap.Map('container', {
resizeEnable: true,
zoom: 9.5, // 地图显示的缩放级别
center: [113.978255,35.281454]
})
AMap.plugin(
['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],
function (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
const autoOptions = {
input: 'keyword', // 使用联想输入的input的id
};
const autocomplete = new AMap.Autocomplete(autoOptions);
const placeSearch = new AMap.PlaceSearch({
map: map,
});
const geocoder = new AMap.Geocoder({
radius: 1000,
extensions: 'all',
});
AMap.event.addListener(autocomplete, 'select', function (e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name, function (status, result) {
const pois = result.poiList.pois;
for (let i = 0; i < pois.length; i++) {
if (pois[i].name === e.poi.name) {
console.log('搜索结果', pois[i]);
geocoder.getAddress(
[pois[i].location.lng, pois[i].location.lat],
function (status, result) {
console.log(result);
if (status === 'complete' && result.info === 'OK') {
console.log(result.regeocode.formattedAddress);
}
}
);
}
}
});
});
}
);
map.on('click', (e) => {
console.log(e);
table.ruleForm.lat = e.lnglat.lat;
table.ruleForm.lng = e.lnglat.lng;
table.ruleForm.all = e.lnglat.lat + ',' + e.lnglat.lng;
});
});
};
5, bind the input box
<div id="container">
<input
v-model="keyword"
class="keyword"
id="keyword"
placeholder="请输入搜索位置"
style="position: absolute; z-index: 99999999999"
autocomplete="off"
/>
</div>
Finally attach the css code
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 376px;
}
#keyword {
margin-top: 1%;
height: 30px;
}
It's ready at this time