使用百度地图实现详细地址自动补全(补全bug''事件只能绑定到一个上的问题')
function G(id) {
return document.getElementById(id);
}
loadMapAutocomplete("suggestId","searchResultPanel");
loadMapAutocomplete("suggestIdshou","searchResultPanelshou");
function loadMapAutocomplete(suggestId, searchResultPanel) {
var checkValue;
Ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": suggestId
, "location": "深圳"
});
Ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G(searchResultPanel).innerHTML = str;
});
Ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
checkValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G(searchResultPanel).innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + checkValue;
//model.LoadDiscAddress(_value.business);
//model.LoadDiscFullAddress(checkValue);
setPlace(model);
});
<div class="col-sm-8" id="r-result">
<input id="suggestId" name="sendAddress" type="text" class="form-control" placeholder="街道详细(精确到门牌号) " required="required">
<p class="error">请填写正确的信息</p>
</div>
<div id="searchResultPanel"
style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
<div id="l-map"></div>
<div class="col-sm-8" id="r-result">
<input id="suggestIdshou" name="sendAddress" type="text" class="form-control" placeholder="街道详细(精确到门牌号) " required="required">
<p class="error">请填写正确的信息</p>
</div>
<div id="searchResultPanelshou" style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
<div id="l-map"></div>
t解决了同一个页面中调用两次这个百度api方法
使用百度地图实现详细地址自动补全(补全bug''事件只能绑定到一个上的问题')的更多相关文章
- 百度地图api通过地址显示地图,白名单
百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...
- 顾维灏谈百度地图数据采集:POI自动处理率达90%
顾维灏谈百度地图数据采集:POI自动处理率达90% 发布时间:2015-12-21 22:37 来源:cnsoftnews.com 作者: 百度地图还创新研发高精地 ...
- 百度地图API-搜索地址、定位、点击获取经纬度并标注
百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...
- 百度地图热力图--批量地址转换应用(基于百度api)
需求:把外卖订餐地址做个用户分布热力图 思路分析:第一步去百度地图api开放平台找例子 http://lbsyun.baidu.com/jsdemo.htm#c1_15 首先从百度API的demo例子 ...
- iOS 学习笔记五 【2016年百度地图定位详细使用方法】
具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...
- 百度地图API 根据地址查询经纬度
html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...
- 百度地图API详细介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 批量调用百度地图API获取地址经纬度坐标
1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...
- 基于Android的百度地图实现输入地址返回经纬度信息
1 解决方案一 此处解决办法参照自网友文章,对于输入的地址信息要求:城市名+具体地址名. 如果输入的地址信息只有具体地址名,而没有城市名,可能解析不出经纬度信息.还有就是解析出的经纬度再反向解析显示再 ...
随机推荐
- java 中文繁简体转换工具 opencc4j
创作缘由 对于中文的繁简体转换是一种很常见的需求. 但是很多工具类都是简单的做个映射.(使用map,集合,properties)等. 存在一个严重的问题:特殊词组 的转换可能存在问题. OpenCC ...
- python中定时任务
今天看网络框架时,突然想看一下定时器,于是往上搜索了一下python中timer task的实现,但是由于python本身对线程的支持不是太好,因为全局排它锁的存在,使得多线程在访问资源时效率比较低. ...
- 204. jetcache:在Spring Boot中怎么玩?
[视频&交流平台] àSpringBoot视频:http://t.cn/R3QepWG à SpringCloud视频:http://t.cn/R3QeRZc à Spring Boot源 ...
- 【Servlet】(1)Servlet简介、Servlet底层原理、Servlet实现方式、Servlet生命周期
一.Servlet简介 1.Servlet定义: Servlet(Server Applet)是Java Servlet的简称,是为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交 ...
- spring梳理
- session and cookie简析
无状态应用程序(cookies.session等机制出现的背景) Web应用程序服务器通常是“无状态的”: 每个HTTP请求都是独立的; 服务器无法判断2个请求是来自同一个浏览器还是用户. Web服务 ...
- Django之form模板的使用
form模块的简介与用处 1.form 是前后端交互的一种方式, form表单提交的一种,django中有一个模块是form他主要用处就过滤前端form提交的数据 1. forms 模块是处理前后台的 ...
- JEECG 上传插件升级-Online
前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...
- Linux命令:builtin
语法: builtin [shell-builtin [arg ...]] 说明: 明确告诉bash执行的是内建命令,而不是和内建命令同名的函数.这实际就是bash容许用户自定义和builtin命令同 ...
- CodeSmith 代码生成器
在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做 ...