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 ...
随机推荐
- Java基础：String不可变性和final修饰
转载请注明出处: jiq•钦's technical Blog - 季义钦 String的不可变性 Java规定String是不可变的(immutable).事实上这个不可变具备两层含义: 1 内容不 ...
- [NOI 2003] 逃学的小孩
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1509 [算法] 树的直径 [代码] #include<bits/stdc++. ...
- bzoj 4521 [ Cqoi 2016 ] 手机号码 —— 数位DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4521 数位DP,记录好多维状态: 写了半天,复杂得写不下去了,于是参考一下TJ... 练习简 ...
- Django day11(一) ajax 文件上传 提交json格式数据
一: 什么是ajax? AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互 ...
- JVM内存模型和GC垃圾回收
JVM 内存区域 1.程序计数器 这是一块较小的内存空间,它的作用可以看做是当前线程所执行的字节码的行号指示器,指的是上次代码被执行的地方,线程私有. 2.Java 虚拟机栈 它是 Java方法执行的 ...
- idea常用快捷键（转）
---恢复内容开始--- IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+S ...
- DIV+CSS设计时浏览器兼容性
近期用Div+css做了个企业网站,在浏览器中测试的时候确发现在IE7中显示正常的页面,在ie6中非常混乱,当时第一感觉就想到了兼容问题,可是百思不得其解应该从哪下手,经过一两天的查资料, ...
- Java.HttpClient绕过Https证书解决方案一
方案1 import javax.net.ssl.*; import java.io.*; import java.net.URL; import java.security.KeyManagemen ...
- 深入理解Redis——（总纲）
前言 Redis这个东西,我来来回回的也搞了好几遍,之前更偏向于实战,很多时候只知其然而不知其所以然,最近借阅了一本<深入理解Redis>,就系统的整理一下. 为何选择Redis 开源免费 ...
- 数据库操作通用函数，增强可重复利用性能C#,asp.net.sql2005
using System;using System.Data;using System.Data.SqlClient; namespace com.hua..li{ /// <summary&g ...