详解Javascript百度地图接口开发文档中的类和方法

<script src="/UploadFiles/2021-04-02/api">

其中参数v为API当前的版本号，目前最新版本为2.0。在1.2版本之前您还可以设置services参数，以告知API是否加载服务部分，true表示加载，false表示不加载，默认为true。。
创建地图实例


var map = new

BMap.Map("container");

//创建点坐标

var point = newBMap.Point(104.045,30.559);

//地图初始化

map.centerAndZoom(point,15);


百度地图控件


向地图添加控件:


map.addControl(newBMap.NavigationControl());



//控件位置:

var opts = {offset: newBMap.Size(150, 5)}

map.addControl(newBMap.ScaleControl(opts));

//修改控件配置:

var opts = {type:BMAP_NAVIGATION_CONTROL_SMALL}

map.addControl(newBMap.NavigationControl(opts));


地图覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。


//创建标注:

var marker = newBMap.Marker(new BMap.Point(104.045,30.559));

//将标注添加到地图中:

map.addOverlay(marker);


地图信息窗口提示
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。


var opts = {

width : 250,//信息窗口宽度

height: 100,//信息窗口高度

title : "Hello"//信息窗口标题

}

var infoWindow = newBMap.InfoWindow("World", opts);//创建信息窗口对象

map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口


地图信息窗口提示(事件触发显示)
事件方法与Map事件机制相同。可参考事件部分
监听标注事件:


marker.addEventListener("click",function(){

alert("您点击了标注");

});


给标注添加点击事件:


marker.addEventListener("click",function(){

map.openInfoWindow(infoWindow,map.getCenter());

});


定位(浏览器定位)
Geolocation地图定位,返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置，不支持的浏览器将无法获取。
创建Geolocation对象实例:


var geolocation = newBMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){ //判断状态

var mk = new BMap.Marker(r.point);//创建一个地图标注

map.addOverlay(mk);

map.panTo(r.point);//转向获取的地理坐标所在位置

alert('您的位置：'+r.point.lng+','+r.point.lat);

}

else {

alert('failed'+this.getStatus());

}

})


定位(IP定位)
LocalCity此类用于获取用户所在的城市位置信息。(根据用户IP自动定位到城市)
创建LocalCity对象实例:


myCity = new BMap.LocalCity();

myCity.get(function(e){

map.setCenter(e.name);

alert(e.name);

});


定位(经纬度定位)
点击获取经纬度实例:


map.addEventListener("click",function(e){

alert(e.point.lng + "," + e.point.lat);

});


根据经纬度定位实例:


var new_point = new BMap.Point(116.299689,40.1196618);

var marker = newBMap.Marker(new_point);//创建标注

map.addOverlay(marker);//将标注添加到地图中

map.panTo(new_point);


地址解析


var myGeo = newBMap.Geocoder();//创建地址解析器实例

//将地址解析结果显示在地图上,并调整地图视野

myGeo.getPoint("北京市昌平区回龙观地铁站", function(point){

if (point) {

map.centerAndZoom(point, 15);

map.addOverlay(new BMap.Marker(point)); //在地图上标注地理位置

}else{

alert("您选择地址没有解析到结果!");

}

}, "北京市");


逆地址解析
Geocoder类用于获取用户的地址解析


var geoc = newBMap.Geocoder();

map.addEventListener("click",function(e){

var pt = e.point; //点击位置的坐标点

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + ", " +addComp.city + ", " + addComp.district + ", " +addComp.street + ", " + addComp.streetNumber);

});


步行规划
WalkingRoute用于获取步行路线规划方案。创建一个步行导航实例。location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。
步行规划实例:


var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});

walking.search("天坛公园", "故宫");

获取步行导航的结果显示实例:

var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

walking.search("天坛公园", "故宫");


驾车规划
DrivingRoute此类用于获取驾车路线规划方案
驾车线路规划实例:


var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

driving.search("女子医院", "王府井广场");


公交检索
TransitRoute用于获取公交路线规划方案
公交检索实例:


var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});

transit.search("中医大省医院", "明宇金融广场");


信息检索
LocalSearch用于位置检索、周边检索和范围检索
关键字检索实例:


var local = new BMap.LocalSearch(map,{

renderOptions:{map: map}

});

local.search("景点");


本地检索结果实例:


var local = newBMap.LocalSearch(map, {

renderOptions: {map: map, panel: "r-result"}

});

local.search("餐饮");


总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。