js百度地图控件API GeolocationControl实现根据搜索关键词定位_bmap api

最新推荐文章于 2022-09-02 10:58:28 发布

baoleilei6

最新推荐文章于 2022-09-02 10:58:28 发布

阅读量6.6k

点赞数 1

分类专栏： H5

H5 专栏收录该内容

115 篇文章 2 订阅

订阅专栏

 
       // 创建地图对象并初始化     
      
       var  
       mp =  
       new  
       BMap.Map( 
       "map_container" 
       ,{     
      
       enableHighResolution:  
       true  
       //是否开启高清     
      
       });     
      
       var  
       point =  
       new  
       BMap.Point(116.404, 39.915);     
      
       mp.centerAndZoom(point, 14);  
       //初始化地图     
      
       mp.enableInertialDragging();  
       //开启关系拖拽     
      
       mp.enableScrollWheelZoom();   
       //开启鼠标滚动缩放     
      
       // 添加定位控件     
      
       var  
       geoCtrl =  
       new  
       BMap.GeolocationControl({     
      
       showAddressBar       :  
       true  
       //是否显示     
      
       , enableAutoLocation :  
       false  
       //首次是否进行自动定位     
      
       , offset             :  
       new  
       BMap.Size(0,25)     
      
       //, locationIcon     : icon //定位的icon图标     
      
       });     
      
       //监听定位成功事件     
      
       geoCtrl.addEventListener( 
       "locationSuccess" 
       , 
       function 
       (e){     
      
       console.log(e);     
      
       });     
      
       //监听定位失败事件     
      
       geoCtrl.addEventListener( 
       "locationError" 
       , 
       function 
       (e){     
      
       console.log(e);     
      
       });     
      
       // 将定位控件添加到地图     
      
       mp.addControl(geoCtrl);     
      
       //检索类型     
      
       var  
       type =  
       "" 
       ;     
      
       type = LOCAL_SEARCH ;    
       //周边检索     
      
       //type = TRANSIT_ROUTE; //公交检索     
      
       //type = DRIVING_ROUTE; //驾车检索     
      
       //创建鱼骨控件     
      
       var  
       navCtrl =  
       new  
       BMap.NavigationControl({     
      
       anchor: BMAP_ANCHOR_TOP_LEFT  
       //设置鱼骨控件的位置     
      
       });     
      
       // 将鱼骨添加到地图当中     
      
       mp.addControl(navCtrl);     
      
       //创建检索控件     
      
       var  
       searchControl =  
       new  
       BMapLib.SearchControl({     
      
       container :  
       "searchBox"  
       //存放检索控件的容器     
      
       , map     : mp           
       //检索的关联地图     
      
       , type    : type         
       //检索类型     
      
       });     
      
       document.getElementById( 
       "selectType" 
       ).onchange =  
       function  
       () {     
      
       searchControl.setType( 
       this 
       .value);     
      
       };     
      
       //添加路况控件     
      
       var  
       ctrl =  
       new  
       BMapLib.TrafficControl({     
      
       showPanel:  
       false  
       //是否显示路况提示面板     
      
       });     
      
       mp.addControl(ctrl);     
      
       ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);

百度地图控件概叙

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。

地图API中提供的控件有：

Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

向地图添加控件

可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：

 
       var  
       map =  
       new  
       BMap.Map( 
       "container" 
       );     
      
 
       map.centerAndZoom( 
       new  
       BMap.Point(116.404, 39.915), 11);     
      
 
       map.addControl( 
       new  
       BMap.NavigationControl()); 
      

可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。

 
       map.addControl( 
       new  
       BMap.NavigationControl());     
      
 
       map.addControl( 
       new  
       BMap.ScaleControl());     
      
 
       map.addControl( 
       new  
       BMap.OverviewMapControl());     
      
 
       map.addControl( 
       new  
       BMap.MapTypeControl());     
      
 
       map.setCurrentCity( 
       "北京" 
       );  
       // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 
      