前端系列——vue2+高德地图web端开发（poi搜索两种方式）

最新推荐文章于 2024-10-09 14:42:27 发布

简明编程

最新推荐文章于 2024-10-09 14:42:27 发布

阅读量6.4k

点赞数 13

分类专栏：笔记 vue 高德地图文章标签：前端 vue.js javascript 高德地图

本文链接：https://blog.csdn.net/qq_51553982/article/details/123030334

版权

本文介绍了如何在Vue2项目中结合高德地图实现两种POI搜索方式：1) 输入提示结合POI搜索，通过监听输入框事件触发搜索；2) 直接进行POI搜索，通过兄弟组件间通信传递搜索值并触发搜索。文章详细讲解了实现步骤，并提供了MapContainer.vue组件的完整代码示例。

摘要由CSDN通过智能技术生成

前言

本文介绍两种poi搜索方式

借助输入提示结合poi进行搜索
直接进行poi搜索

基础

本文基础需要大家知道watch监听机制，高德poi搜索，兄弟组件之间的数据传输

什么是poi搜索

高德官方给出即输入关键字后地图进行地点的搜索匹配

1. 输入提示结合poi搜索

在上一篇文章中，我们实现了输入提示，于是我们就可以借助输入提示进行poi搜索

官方代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示后查询</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput"/>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    //地图加载
    var map = new AMap.Map("container", {
   
        resizeEnable: true
    });
    //输入提示
    var autoOptions = {
   
        input: "tipinput"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
   
        var auto