当前位置:网站首页>【高德地图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>
,不起作用
还有其他一些文章也不管用
还得从官方文档找
?,这句话在我刚开始直接忽略,难道是版本问题,回头看我代码中的https://webapi.amap.com/maps?v=1.4.15
,竟然是1.4.15 ???,然后我将代码中AutoComplete
改成Autocomplete
,哇哦,成功!!!
反思
以后拿官方的demo就拿全份,不要从别的什么博文中乱粘贴!
边栏推荐
- [2021]IBRNet: Learning Multi-View Image-Based Rendering Qianqian
- Bit of MySQL_ OR、BIT_ Count function
- Chapter 6 relational database theory
- Redis-01.初识Redis
- [leetcode] day95 effective Sudoku & matrix zeroing
- How to generate an image from text on fly at runtime
- Leetcode-3: Longest substring without repeated characters
- Real time clock (RTC)
- Network security skills competition in Secondary Vocational Schools -- a tutorial article on middleware penetration testing in Guangxi regional competition
- Golang uses context gracefully
猜你喜欢
Erreur de connexion Navicat à la base de données Oracle Ora - 28547 ou Ora - 03135
4.Oracle-重做日志文件管理
Real time clock (RTC)
1.手动创建Oracle数据库
求组合数 AcWing 889. 满足条件的01序列
Open source storage is so popular, why do we insist on self-development?
Gaussian elimination acwing 884 Gauss elimination for solving XOR linear equations
Alibaba established the enterprise digital intelligence service company "Lingyang" to focus on enterprise digital growth
NotImplementedError: Cannot convert a symbolic Tensor (yolo_boxes_0/meshgrid/Size_1:0) to a numpy ar
MatrixDB v4.5.0 重磅发布,全新推出 MARS2 存储引擎!
随机推荐
Chart. JS - Format Y axis - chart js - Formatting Y axis
容斥原理 AcWing 890. 能被整除的数
Operator priority, one catch, no doubt
C Primer Plus Chapter 15 (bit operation)
[rust notes] 13 iterator (Part 2)
Alibaba established the enterprise digital intelligence service company "Lingyang" to focus on enterprise digital growth
TypeScript 基础讲解
New title of module a of "PanYun Cup" secondary vocational network security skills competition
Chapter 6 relational database theory
Traversal of leetcode tree
[BMZCTF-pwn] ectf-2014 seddit
Leetcode-31: next spread
[rust notes] 15 string and text (Part 1)
Records of some tools 2022
AE tutorial - path growth animation
SPI details
Leetcode-3: Longest substring without repeated characters
[2020]GRAF: Generative Radiance Fields for 3D-Aware Image Synthesis
Sqlmap tutorial (II) practical skills I
Leetcode-1200: minimum absolute difference