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 ...
随机推荐
- 好记性不如烂笔头——.NET运行原理
WINDOWS中运行的代码,分为托管代码和非托管代码. .NET环境中运行的代码就是托管代码,.NET环境外运行的就是非托管代码. 我们开发的时候,会对源代码进行编译.但其实,对于托管代码,我们编译出 ...
- QT 相关资源（书籍、论坛、博客等。。。）整理
QT 相关资源(书籍.论坛.博客等...)整理... 中文名:<提问的智慧> 英文名:How To Ask Questions The Smart Way 中文链接1:http://ww ...
- PCB MS SERVER 数据导出与导入操作步骤----使用第3方工具
工作每天都与数据库打交道,经常会遇到一些需要将数据库中的数据导出来或将数据导入到数据库 而用微软数据库客户端自带的功能操作步骤好麻烦的,用过的大家都会有相同的感受吧. 微软客户端不好之处整理:这里吐槽 ...
- C# 处理oralce 时间
addWorkSql.Append("to_date(' " + DateTime.Now.ToString("yyyy-MM-dd HH:ss:mm") + ...
- [NOI2015，LuoguP2146]软件包管理器------树剖
***题目链接戳我*** 又是在树上瞎搞滴题目.... 我们如果以安装的软件为1,未安装的软件为0,那么软件改变的数量即树上权值总和的数量,涉及到区间修改,区间查询,考虑树剖 分析完毕,似乎没啥好说的 ...
- C - Between the Offices
Problem description As you may know, MemSQL has American offices in both San Francisco and Seattle. ...
- Mysql Event 自动分表
create table TempComments Like dycomments; 上述 SQL语句创建的新表带有原表的所有属性,主键,索引等. 自动分表怎么做呢? 使用上述语句自动创建分表. 那么 ...
- poj 1564 Sum It Up 搜索
题意: 给出一个数T,再给出n个数.若n个数中有几个数(可以是一个)的和是T,就输出相加的式子.不过不能输出相同的式子. 分析: 运用的是回溯法.比较特殊的一点就是不能输出相同的式子.这个可以通过ma ...
- Eclipse之注释部分代码
有时为了调试,部分代码需要注释掉,如果一行一行的加注释符特别麻烦. 一.快捷键:ctrl+/ 选择需要注释的部分,点Ctrl+/,这段代码前,自动加注释语. 取消注释也是按Ctrl+/ 步骤: 选择需 ...
- 团体程序设计天梯赛-练习集-L1-035. 情人节
L1-035. 情人节 以上是朋友圈中一奇葩贴:“2月14情人节了,我决定造福大家.第2个赞和第14个赞的,我介绍你俩认识…………咱三吃饭…你俩请…”.现给出此贴下点赞的朋友名单,请你找出那两位要请客 ...