JS百度地图搜索悬浮窗功能


Posted in Javascript onJanuary 12, 2017

这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的。文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular

效果图:

JS百度地图搜索悬浮窗功能

代码

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
  body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
  #l-map{height:300px;width:100%;}
  #r-result{width:100%;}
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
 <title>关键字输入提示词条</title>
</head>
<body>
 <div id="l-map">
 </div>
</body>
</html>

<script type="text/javascript">
 // 百度地图API功能
 function G(id) {
  return document.getElementById(id);
 }

 var map = new BMap.Map("l-map");
 map.centerAndZoom("北京",10); // 初始化地图,设置城市和地图级别。

 // 定义一个控件类,即function
 function ZoomControl() {
  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  this.defaultOffset = new BMap.Size(10, 10);
 }

 // 通过JavaScript的prototype属性继承于BMap.Control
 ZoomControl.prototype = new BMap.Control();

 // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
 ZoomControl.prototype.initialize = function(map){
  // 创建一个DOM元素
  var div = document.createElement("div");
  div.innerHTML = '<div id="r-result">搜索地址:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>';

  // 添加DOM元素到地图中
  map.getContainer().appendChild(div);
  // 将DOM元素返回
  return div;
 }

 // 创建控件
 var myZoomCtrl = new ZoomControl();
 // 添加到地图当中
 map.addControl(myZoomCtrl);


 var ac = new BMap.Autocomplete( //建立一个自动完成的对象
  {"input" : "suggestId"
  ,"location" : map
 });

 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;
 });

 var myValue;
 ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
 var _value = e.item.value;
  myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

  setPlace();
 });

 function setPlace(){
  map.clearOverlays(); //清除地图上所有覆盖物
  function myFun(){
   var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
   map.centerAndZoom(pp, 14);
   map.addOverlay(new BMap.Marker(pp)); //添加标注
  }
  var local = new BMap.LocalSearch(map, { //智能搜索
   onSearchComplete: myFun
  });
  local.search(myValue);
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
vue组件的写法汇总
Apr 12 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
原生js实现放大镜效果
Jan 11 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP获取文件行数的方法
2015/06/10 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python实现简易通讯录修改版
2018/03/13 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python 连续不等式语法糖实例
2020/04/15 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
入党自我评价优缺点
2014/01/25 职场文书
员工培训邀请函
2014/02/02 职场文书
大学秋游活动方案
2014/02/11 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
员工工作及收入证明
2014/10/28 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers