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 ...
随机推荐
- luogu3084 Photo 单调队列优化DP
题目大意 农夫约翰决定给站在一条线上的N(1 <= N <= 200,000)头奶牛制作一张全家福照片,N头奶牛编号1到N.于是约翰拍摄了M(1 <= M <= 100,000 ...
- luogu1265 公路修建
题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成. 修建工程分若干轮完成.在每一轮中,每个城市选择一个 ...
- oc59--匿名分类
// // main.m // 匿名分类(延展) // 可以为某个类扩展私有的成员变量和方法,写在.m文件中, // 分类不可以扩展属性,分类有名字,匿名分类没有名字. #import <Fou ...
- elasticsearch 索引搜索和索引性能优化配置——思路：去掉不必要的数据，减小数据的磁盘空间占用，同时提升性能
压缩配置: index.codec: best_compression 合并索引: curl –XPOST localhost:9200/hec_test3/_forcemerge’ 配置mappin ...
- C# SuperWebSocket服务端学习（二）
首先需要下载DLL类库 地址详见:http://download.csdn.NET/detail/u011269801/9590935 1,打开VS2012,新建一个控制台应用程序,选择.NET4. ...
- 用SQL实现统计报表中的“小计”和“合计”
问题: 开发一个关于各烟叶等级的二次验级的原发件数.原发重量及验收重量的统计报表.其中,原发件数.原发重量和验收重量等列要求计算出各等级组别的小计和所有记录的合计. 语句: SELECT DECODE ...
- Organize Your Train part II(hash)
http://poj.org/problem?id=3007 第一次用STL做的,TLE了,自己构造字符串哈希函数才可以.. TLE代码: #include <cstdio> #inclu ...
- Cuckoo for Hashing
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2719 #include <stdio.h ...
- javaweb 课程设计编码和设计文档
企业办公软件设计文档 1引言 1.1编写目的 OA办公自动化系统详细设计是设计的第三个阶段,这个阶段的主要任务是在OA办公自动化系统概要设计书基础上,对概要设计中产生的功能模块进行过程描述,设计功能模 ...
- 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 ...