<template>
<div>
<!-- -->
<div id="container"></div>
<div class="search">
<input type="input" placeholder="请输入关键字" v-model="keyWord" />
<button @click="onSearch">搜索</button>
</div>
<div id="panel"></div>
</div>
</template>
<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥
window._AMapSecurityConfig = {
securityJsCode: "秘钥",
};
export default {
name: "GaodeMapContainer",
data() {
return {
map: null, //
traffic: null, // 实时交通
keyWord: null, //输入搜索的关键字
};
},
mounted() {
this.initData();
},
methods: {
// 1. 展示地图
async initData() {
const AMap = await AMapLoader.load({
key: "key", //申请好的Web端开发者key,调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
plugins: ["AMap.PlaceSearch"], // 引入地图控件
});
// 3-1. 展示图层--创建图层
const layer = new AMap.createDefaultLayer({
zooms: [3, 20], //可见级别
visible: true, //是否可见
opacity: 1, //透明度
zIndex: 0, //叠加层级
});
// 2.初始化地图-把地图展示到指定的容器区域内
this.map = new AMap.Map("container", {
viewMode: "2D", //默认使用 2D 模式,平面模式
center: [121.045332, 31.19884], //地图中心点
zoom: 8.8, //地图级别
mapStyle: "amap://styles/normal", //设置地图的显示样式
layers: [layer], //layer为创建的默认图层3-2:展示图层
});
},
onSearch() {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, //单页显示结果条数
pageIndex: 1, //页码
city: "010", //兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: this.map, //展现结果的地图实例
panel: "panel", //结果列表将在此容器中进行展示。
autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
});
placeSearch.search(this.keyWord, (status, result) => {
//查询成功时,result 即对应匹配的 POI 信息
});
},
},
};
</script>
<style scoped>
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 800px;
background: pink;
}
.search {
position: fixed;
top: 5px;
right: 10px;
background-color: white;
}
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 30px;
right: 10px;
width: 280px;
}
</style>
>
高德地图(vue项目)-搜索地点
最新推荐文章于 2024-06-12 14:23:36 发布