zoukankan      html  css  js  c++  java
  • 百度地图(15)-自动完成

    1. 百度地图提供了关键字搜索功能,它是基于自动完成和本地搜索来完成的,先使用

    BMap.Autocomplete 进行关键字自动完成,然后根据结果内容使用 BMap.LocalSearch 进行定位。

    2. 代码

    AutoComplete 中的 input 是输入框的ID,location 则指向当前地图对象。

    onhighlight 是指鼠标或者键盘移动,移到某条记录高亮时触发的事件。

    onconfirm 是指选择某条记录时触发的事件。确定后,在地图中标记当前选择记录的位置。setPlace 

     1 var ac = new BMap.Autocomplete({
     2   "input":"suggestId"
     3   ,"location":map
     4 })
     5 
     6 ac.addEventListener('onhighlight',function (e) {
     7   var str = "";
     8   var _value = e.fromitem.value;
     9   var value = "";
    10   if(e.fromitem.index > -1){
    11     value = _value.province + _value.city + _value.district + _value.street + _value.business;
    12   }
    13   str = "FromItem<br />index=" + e.fromitem.index + "<br />value=" + value;
    14   value = "";
    15   if(e.toitem.index > -1){
    16     _value = e.toitem.value;
    17     value = _value.province + _value.city + _value.district + _value.street + _value.business;
    18   }
    19 
    20   str += "<br />ToItem<br />index=" + e.toitem.index + "<br />value = " + value;
    21   G("searchResultPanel").innerHTML = str;
    22 
    23 });
    24 
    25 var myValue ;
    26 ac.addEventListener("onconfirm",function (e){
    27   var _value = e.item.value;
    28   myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
    29   G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue" + myValue;
    30   setPlace();
    31 });
    32 
    33 function setPlace(){
    34   map.clearOverlays();
    35   function myFun() {
    36     var pp = local.getResults().getPoi(0).point;
    37     map.centerAndZoom(pp,18);
    38     map.addOverlay(new BMap.Marker(pp));
    39   }
    40   var local = new BMap.LocalSearch(map,{
    41     onSearchComplete:myFun
    42   });
    43   local.search(myValue);
    44 }

    3. 页面显示

     

     

    4. 参考代码

    https://github.com/WhatGIS/bdMap

     
  • 相关阅读:
    20135316王剑桥 linux第十一周课实验笔记
    20135316王剑桥 linux第十周课实验笔记
    20135316王剑桥 linux第七周课实验笔记
    0
    KRPANO资源分析工具下载四方环视全景图
    KRPANO资源分析工具下载720YUN全景图
    使用JAVA调用KRPANO加密XML
    KRPano JS 场景编辑器源码
    KRPano多屏互动原理
    KRPANO PR10最新激活码(破解)分享
  • 原文地址:https://www.cnblogs.com/googlegis/p/14685583.html
Copyright © 2011-2022 走看看