初始化地图
const initMap = () => {
AMapLoader.load({
key: '自己的key', // 后期需替换
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch'],
})
.then((AMap) => {
AMap1.value = AMap
// 初始化地图
map.value = new AMap.Map('map-location', { //map-location为地图容器的id
viewMode: '3D', // 是否为3D地图模式
zoom: 17, // 初始化地图级别
center: [116.26755900, 39.91547100], //默认中心点
resizeEnable: true,
})
// 创建引入搜索组件
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
// city: "010", // 兴趣点城市
citylimit: false, // 是否强制限制在设置的城市内搜索
map: map.value, // 展现结果的地图实例
panel: 'info', // 展示结果容器的id。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
})
placeSearchRef.value = placeSearch
// 主要就是使用placeSearch.search('关键词') 我这里在外部使用,将变量保存一下
})
.catch((e) => {
console.log(e)
})
}
搜索关键词
const keyword= ref('') // keyword 为input的value
watch(() => keyword.value, (newVal) => {
if (newVal) {
// 搜索函数
placeSearchRef.value.search(newVal)
}
else {
// 为空清空结果
placeSearchRef.value.clear()
}
}, {
deep: true,
// immediate: true,
})
全部代码
<!--
Description: 高德地图选点搜索
Author: 李亚光
Date: 2023-04-21
-->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '换成自己的', // 后期需替换
}
// 地图实例
const placeSearchRef = ref()
// 初始化地图
const initMap = () => {
AMapLoader.load({
key: '换成自己的', // 后期需替换
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then((AMap) => {
// 初始化地图
map.value = new AMap.Map('map-location', {
viewMode: '3D', // 是否为3D地图模式
zoom: 17, // 初始化地图级别
center: [116.26755900, 39.91547100],
resizeEnable: true,
})
// 清除所有图层
map.value.clearMap()
// 创建引入搜索组件
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
// city: "010", // 兴趣点城市
citylimit: false, // 是否强制限制在设置的城市内搜索
map: map.value, // 展现结果的地图实例
panel: 'info', // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
})
placeSearchRef.value = placeSearch
})
.catch((e) => {
console.log(e)
})
}
onMounted(async () => {
initMap()
})
onBeforeUnmount(() => {
// 解绑事件
map.value.clearMap()
map.value.destroy()
})
const keyword= ref('')
watch(() => keyword.value, (newVal) => {
if (newVal) {
// 搜索函数
placeSearchRef.value.search(newVal)
}
else {
// 关键词为空时清空结果
placeSearchRef.value.clear()
}
}, {
deep: true,
// immediate: true,
})
</script>
<template>
<div class="box" style="position: relative;">
<div id="map-location" style="width: 100%; height: 500px;" />
<div class="info">
<div class="input-item">
<el-input v-model="keyword" placeholder="请输入关键字" clearable />
</div>
</div>
<div id="info" />
</div>
</template>
<style lang="scss" scoped>
.box {
position: relative;
}
#info {
width: 270px;
position: absolute;
top: 34px;
right: 0;
}
#map {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
// padding: 0.5rem 0.7rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
position: absolute;
top: 0;
background-color: #fff;
width: auto;
min-width: 270px;
border-width: 0;
right: 0;
// box-shadow: 0 2px 6px 0 rgb(240 131 0 / 50%);
.input-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 2.2rem;
border: 1px solid #ccc;
border-radius: 0.2rem;
}
}
</style>
<style>
/* 隐藏高德logo */
.amap-logo {
display: none !important;
}
/* 隐藏高德版权 */
.amap-copyright {
display: none !important;
}
.amap-marker-label {
border: 0;
background-color: transparent;
}
</style>
效果
需要注意
普通用户 一天一百次机会