架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 2236|回复: 1

[其他] 百度地图JS检索控件功能

[复制链接]
发表于 2018-2-2 15:38:04 | 显示全部楼层 |阅读模式
首先,附上百度自己demo的链接和截图:http://api.map.baidu.com/library/SearchControl/1.4/examples/SearchControl.html

感觉,功能可以做出来,但是太丑了。。。。

QQ截图20180202153503.jpg

下面是我自己做的,参考的别人做的代码。

s123.gif

首先,附上别人的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
  8.         #l-map{height:300px;width:100%;}
  9.         #r-result{width:100%;}
  10.     </style>
  11.     <scrip{过滤}t type="text/javascrip{过滤}t" src="https://api.map.baidu.com/api?v=1.4"></scrip{过滤}t>
  12.     <title>关键字输入提示词条</title>
  13. </head>
  14. <body>
  15.     <p id="l-map">
  16.     </p>
  17. </body>
  18. </html>

  19. <scrip{过滤}t type="text/javascrip{过滤}t">
  20.     // 百度地图API功能
  21.     function G(id) {
  22.         return document.getElementById(id);
  23.     }

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

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

  31.     // 通过Javascrip{过滤}t的prototype属性继承于BMap.Control
  32.     ZoomControl.prototype = new BMap.Control();

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

  39.       // 添加DOM元素到地图中
  40.       map.getContainer().appendChild(p);
  41.       // 将DOM元素返回
  42.       return p;
  43.     }

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


  48.     var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
  49.         {"input" : "suggestId"
  50.         ,"locatio{过滤}n" : map
  51.     });

  52.     ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
  53.     var str = "";
  54.         var _value = e.fromitem.value;
  55.         var value = "";
  56.         if (e.fromitem.index > -1) {
  57.             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  58.         }
  59.         str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

  60.         value = "";
  61.         if (e.toitem.index > -1) {
  62.             _value = e.toitem.value;
  63.             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  64.         }
  65.         str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  66.         G("searchResultPanel").innerHTML = str;
  67.     });

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

  73.         setPlace();
  74.     });

  75.     function setPlace(){
  76.         map.clearOverlays();    //清除地图上所有覆盖物
  77.         function myFun(){
  78.             var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
  79.             map.centerAndZoom(pp, 14);
  80.             map.addOverlay(new BMap.Marker(pp));    //添加标注
  81.         }
  82.         var local = new BMap.LocalSearch(map, { //智能搜索
  83.           onSearchComplete: myFun
  84.         });
  85.         local.search(myValue);
  86.     }
  87. </scrip{过滤}t>
复制代码


然后,我自己的代码如下:

html页面
  1. <div class="input-group">
  2.             <span class="input-group-addon">地图检索</span>
  3.             <input type="text" id="txtCtiySearch" class="form-control" placeholder="地点">
  4.         </div>
复制代码
  1. //检索 //建立一个自动完成的对象
  2.             var ac = new BMap.Autocomplete(   
  3.             {
  4.                 "input": "txtCtiySearch",
  5.                 "locatio{过滤}n": map
  6.             });
  7.             ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
  8.                 var _value = e.item.value;
  9.                 myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  10.                 setPlace();
  11.             });
复制代码
  1. function setPlace() {
  2.             map.clearOverlays();    //清除地图上所有覆盖物
  3.             function myFun() {
  4.                 var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
  5.                 map.centerAndZoom(pp, 14);
  6.                 map.addOverlay(new BMap.Marker(pp));    //添加标注
  7.             }
  8.             var local = new BMap.LocalSearch(map, { //智能搜索
  9.                 onSearchComplete: myFun
  10.             });
  11.             local.search(myValue);
  12.         }
复制代码






上一篇:以太坊.Net连接(Nethereum)库
下一篇:.net/c# 运用websocket做网站的消息通知[源码]
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2018-12-12 13:17

Powered by Discuz! X3.4

© 2001-2014 Comsenz Inc.

快速回复 返回顶部 返回列表