当前位置：网站首页>【高德地图POI踩坑】AMap.PlaceSearch无法使用

【高德地图POI踩坑】AMap.PlaceSearch无法使用

2022-07-05 06:23:00 【Heerey525】

情况

近期有需要用到高德地图的搜索功能

步骤

申请key

在高德地图的开放平台注册账号并申请Key，得到key和安全密钥

找到案例

在文档中到功能输入提示与POI搜索

进入demo

选择我需要的功能输入提示后查询，发现符合我的预期。

本地运行demo

直接将上一步骤的demo拷贝，在本地运行。
还需要注意一点是后期使用需要将安全密钥也带上。

在这里插入图片描述

<script type="text/javascript">
    window._AMapSecurityConfig = {
    
        securityJsCode:'你的安全密钥',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>

搜索无提示

直接拷贝的代码，添加上key和安全密钥，搜索竟然不能提示地址。
在这里插入图片描述

<!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"/>
</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">
    window._AMapSecurityConfig = {
    
        securityJsCode:'你的安全密钥',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
<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 = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
    
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
    
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    });
</script>
</body>
</html>

百度搜索无果

百度搜索一圈

有说将插件使用由 AMap.plugin 变更为 AMap.service，不起作用
有说将插件使用由 AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){}) 变更为同步方式 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.PlaceSearch,AMap.AutoComplete"></script>，不起作用
还有其他一些文章也不管用