HTML5技术

百度地图API - 特别的学(2)

字号+ 作者:H5之家 来源:H5之家 2016-09-26 13:00 我要评论( )

polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910 ), new BMap.Point(116.405, 39.920 )],{strokeColor: "blue", strokeWeight:6, strokeOpacity:0.5 });map.addOverlay(polyline); Polyline表示地

polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} ); map.addOverlay(polyline);

Polyline表示地图上的折线覆盖物。它包含一组点,并将这些点连接起来形成折线。

 添加信息类

var opts1={ width:250, height:100, title:'hello' } var infoWindow=new BMap.InfoWindow('world',opts1); map.openInfoWindow(infoWindow,map.getCenter());

使用infoWindow来创建一个信息窗实例,一个地图上只能有一个信息窗处于打开状态

 

 

事件监听

百度地图API中大部分对象都含有addEventListener,可以通过该方法来监听对象的事件

点点击地图时触发事件:

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("click", function(){ alert("您点击了地图。"); });

当拖动地图后事件:

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("dragend", function(){ var center = map.getCenter(); alert("地图中心点变更为:" + center.lng + ", " + center.lat); })

当地图缩放后事件,

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("zoomend", function(){ alert("地图缩放至:" + this.getZoom() + "级"); });

 移除事件

每一个API对象都提供了removeEventListener用来移除事件监听函数

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); function showInfo(e){ alert(e.point.lng + ", " + e.point.lat); map.removeEventListener("click", showInfo); } map.addEventListener("click", showInfo);

用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。

 

 服务配置

local=new BMap.LocalSearch('北京市',{ renderOptions: {map: map,autoViewport: true},pageCapacity: 9 }); var local=new BMap.LocalSearch(map,{ renderOptions:{map:map,panel:'results'} }); local.search("中关村");options={ onSearchComplete:function(results){ if(local.getStatus()==BMAP_STATUS_SUCCESS){ var s=[]; for (var i = 0; i <results.getCurrentNumPois(); i++) { s.push(results.getPoi(i).title+","+results.getPoi(i).address); } console.log(s); } } } var local=new BMap.LocalSearch(map,options,{ renderOptions: {map: map,autoViewport: true},pageCapacity: 9 }); //var local=new BMap.LocalSearch('北京市'); local.search('中华共和国公安部'); local.searchNearby('小吃','前门'); myGeo= myGeo.getPoint('北京市海淀区上地10街10号',function(point){ if(point){ map.centerAndZoom(point,16);//调整地图视野 map.addOverlay(new BMap.Marker(point));//添加标注到map上 } },'北京市');myGeo.getLocation(new BMap.Point(120.305456, 31.570037),function(result){ if(result){ alert(result.address); } });

 

全景控件

stCtrl=new BMap.PanoramaControl(); stCtrl.setOffset(new BMap.Size(20,20)); map.addControl(stCtrl); panorama=new BMap.Panorama('panorama',{navigationControl:false,linksControl:false}); Panorama.setOptions({navigationControl:false,linksControl:false}); panorama = Panorama.setOptions({linksControl:false});

 

 


 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • ios微信二维码无法长按识别的若干解决方案 - 依十七

    ios微信二维码无法长按识别的若干解决方案 - 依十七

    2016-08-19 14:00

  • WPF仿百度Echarts人口迁移图 - 普通的地球人

    WPF仿百度Echarts人口迁移图 - 普通的地球人

    2016-06-26 18:00

  • JS 百度地图导航 - 小月博客

    JS 百度地图导航 - 小月博客

    2016-06-13 11:00

  • 为了媳妇的一张号,我与百度医生杠上了 - 大数据 小世界

    为了媳妇的一张号,我与百度医生杠上了 - 大数据 小世界

    2016-04-03 16:00

网友点评
h