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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
bootstrap表单示例代码分享
May 18 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
原生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中的字符串函数
2006/10/09 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python 图片验证码代码
2008/12/07 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python和go语言的区别是什么
2020/07/20 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
python lambda的使用详解
2021/02/26 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
法律专业实习鉴定
2013/12/22 职场文书
自我鉴定注意事项
2014/01/19 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
预防煤气中毒方案
2014/06/16 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
盗窃案辩护词
2015/05/21 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python