web开发如何使用高德地图API（二）结合输入提示和POI搜索插件
说两句：
准备工作：
拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
显示基础地图所用到的HTML和JS
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]//默认的地图中心经纬度
});
</script>
引入高德地图工具包js文件
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
编写输入提示需要的HTML标签
- 就是在<body>中加入一个id唯一的输入框，用于提示框的绑定
<div>
<input id="tipinput" class="form-control input-style" placeholder="请输入关键字" value=""/>
</div>
输入提示和POI搜索插件用到的JS
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
var autoOptions = {
city: "北京", //城市，默认全国
input: "keyword"//使用联想输入的input的id（也就是上边那个唯一的id）
};
autocomplete= new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
city:'北京',
map:map
})
AMap.event.addListener(autocomplete, "select", function(e){
//TODO 针对选中的poi实现自己的功能
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name)
});
});
效果图
小贴士
- 你可能发现浏览器默认记忆了你的搜索历史，显示在搜索框下边，这样会影响输入提示。
- 所以，需要在input中设置属性autocomplete="off"
web开发如何使用高德地图API（二）结合输入提示和POI搜索插件的更多相关文章
- web开发如何使用高德地图API（四）通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（三）点击热点打开信息窗体
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（一）浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- web开发如何使用百度地图API（一）判断点是否在范围内
准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...
- [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
- 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）
高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...
随机推荐
- How to use shared model by git in sql source control of red gate
1.clone the git repository for datbase 2.open sql source control window and select the target databa ...
- 【概念的辨异】—— ISO C 与 POSIX C（C standard library 与 C POSIX library）
ISO C 表示 C Standard Library,也就是 C 标准库. 二者的主要区别在于: POSIX 是 C 标准库的超集(也即是从内容上,C 标准库是 POSIX 库的一部分,POSIX ...
- stack 栈
其实今天我们主要讲的是搜索,但是留作业不知道怎么就突然全变成栈了. 其实栈和队列没什么区别,只是一个先进先出,一个先进后出.基本操作也是一样的. 栈(stack)又名堆栈,它是一种运算受限的线性表.其 ...
- Gym - 101981J The 2018 ICPC Asia Nanjing Regional Contest J.Prime Game 计数
题面 题意:1e6的数组(1<a[i]<1e6), mul (l,r) =l × (l+1) ×...× r, fac(l,r) 代表 mul(l,r) 中不同素因子的个数,求s ...
- Java学习笔记之从C++转Java
之前一直是做C++后台开发的,习惯了命令行和g++,由于工作原因现在开始转java. 1.参考书籍:java编程思想(think in java),java核心技术(core java); 2.怎么在 ...
- POJ 1111（数字很吉利嘛） 简单BFS
Image Perimeters Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8594 Accepted: 5145 Desc ...
- SHRINK SPACE Command : Online Segment Shrink for Tables, LOBs and IOTs
ORACLE-BASE - ALTER TABLE ... SHRINK SPACE Command : Online Segment Shrink for Tables, LOBs and IOTs ...
- informix 通过ADO或ODBC连接提取数据时出现中文乱码的解决方法
最近在做一个项目,是对INFORMIX数据库的数据进行大数据分析,INFORMIX数据库数据有上亿条,没有linux的Root权限和informix数据的生产权限,只能读取.客户要求结果显示在内网wi ...
- 删除git上已经提交的文件
1.先查看有哪些文件可以删除,但是不真执行删除 git rm -r -n job-executor-common/target/* -r 递归移除目录 -n 加上这个参数,执行命令时,是不会删除任何 ...
- AI不与人为敌
业界广为流传着一句话:有多少人工就有多少智能. 其实还应该有一句话:有多少付出就因该有多少回报.公正是世界永恒的话题. 一.人工智能还是人工愚蠢 科技从来没有善恶,也不会杀人,愚蠢的人比聪明的人做的错 ...