高德地图组合使用Autocomplete和PlaceSearch进行POI搜索

最新推荐文章于 2024-05-23 10:55:25 发布

甜甜凉白开

最新推荐文章于 2024-05-23 10:55:25 发布

阅读量3.9k

点赞数 2

分类专栏：地图文章标签：前端

本文链接：https://blog.csdn.net/qq_41877050/article/details/119915598

版权

地图专栏收录该内容

10 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中实现地图搜索功能，包括页面元素渲染、数据定义、JavaScript逻辑和CSS样式。通过AMap插件，创建了搜索框和搜索结果列表，用户输入关键字后能显示匹配的地理位置并能在地图上添加标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

页面渲染：

<!-- 地图搜索栏 -->
			<div class="tool_search" v-if="this.toolShow && this.toolSerach">
				<el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称">
					<el-button slot="append" icon="el-icon-search" @click="searchKeyword" style="width:60px"></el-button>
				</el-input>
			</div>
			<!-- 搜索结果栏 -->
			<div class="tool_search_result" v-if="this.toolShow && this.showsearchResult">
				<ul>
					<li @click="markerResult(item)" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>
				</ul>
			</div>

数据定义：

// 地图搜索
			showsearchResult:false,
			autoCompleteComponent: undefined,
			placeSearchComponent: undefined,
			markerList:[],
			mapInput:'',
			inputSearchVal:'',
			poiList:[],

js逻辑：

//--------地图搜索-----------
		search(){
			this.is1 = !this.is1
			this.toolSerach = !this.toolSerach
			if(this.toolSerach===false){
				this.showsearchResult = false
				//清除结果标点，暂时还没做
			}
		},
		markerResult(data){
			var marker = new AMap.Marker({
				position: [Number(data.location.lng),Number(data.location.lat)],
				cursor:'pointer',
				// icon: carIcon,
				autoRotation: true,
				angle:0,
				offset: new AMap.Pixel(-36, -30),
			});
			marker.setMap(this.mapall);
			this.mapall.setFitView();
		},
		/** 初始化搜索工具 */
		mapSearchInit(){   //在mounted中调用
			var autoOptions = {
				input: "tipInput",
			}
			var autoCompleteComponent= new AMap.Autocomplete(autoOptions);
			this.autoCompleteComponent = autoCompleteComponent;
			// 注册placeSearch组件
			this.placeSearchComponent = new AMap.PlaceSearch()
		},
		searchKeyword(){
			let cur = this
			this.placeSearchComponent.search(this.inputSearchVal, function (status, result) {
				// 查询成功时，result即对应匹配的POI信息
				console.log(status);
				console.log(result);
				if(status==='complete' && result.info === "OK"){
					cur.showsearchResult = true
					cur.poiList = result.poiList.pois
				}else{
					cur.showsearchResult = false
					cur.poiList = []
					cur.$message({
						message: "没有查到结果",
						type: "warning",
					});
				}
			})
		},

css样式：

.tool_search{
      width: 250px;top: 42px;right: 270px;height:32px;
      background:#eee;opacity: 0.8;border-radius: 4px;margin-top:2px;
      bottom: auto;z-index:12;position: absolute;text-align: left;
      font-size: 14px;
  }
  ::v-deep .el-input-group__append, .el-input-group__prepend{
    border: 1px solid rgb(194, 193, 193);
    border-left: none;
    background: rgb(231, 230, 230);
    color: rgb(77, 77, 73);
  }
  ::v-deep .el-input__inner{
    border: 1px solid rgb(194, 193, 193);
  }
  .tool_search_result{
      width: 250px;top: 78px;right: 270px;height:300px;
      border: 1px solid rgb(175, 175, 173);
      border-top: none;
      background:#fff;opacity: 0.8;
      margin-top:2px;
      bottom: auto;z-index:12;position: absolute;text-align: left;
      font-size: 14px;
  }
  .tool_search_result ul{
      width:100%;
      height:100%;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  .tool_search_result ul li{
    font-size: 12px;
      color: rgb(23, 40, 75);
      text-align: center;
      width:100%;
      height:9.75%;
      float: left;
      margin: 0px 0px 1px 0;
      padding:2.5% 4px 0 4px;
      border-bottom: 1px dashed rgb(170, 170, 172);
      display: inline-block;
      white-space: nowrap; 
      overflow: hidden;
      text-overflow:ellipsis;
  }
  .tool_search_result ul li:last-child{
    border: none;
  }