百度地图api开发入门学习总结

1，申请密钥:key=&v=1.1&services=true

2，初始化头文件

<!DOCTYPE html>

</head>

3，创建一个盛放地图的div:

4，初始化地图：

var map1=new BMap.Map("container");//申请地图图片

map1.centerAndZoom(new BMap.point(12.00435,14.57483)，11);//初始化地图坐标，地图放大倍数

5，丰富地图功能：

*添加地图控件：

map2.addControl(new BMap.NavigationControl());//添加平移缩放控件

map2.addControl(new BMap.ScaleControl());//添加比例尺

map2.addControl(new BMap.OverviewControl());//添加小地图

map2.addControl(new BMap.MapTypeControl());//添加地图类型

**控件参数：

所有：

anchor（控件位置）：BMAP_ANCHOR_TOP/BUTTON_LEFT/RIGHT(左上角，右上角。。。）

offset（偏移量）：new BMap.Size(10,20)

navagationControl参数：

type(类型）：BMAP_NAVIGATION_CONTROL_LARGE/SMALL/PAN/ROOM（完整，小型，平移部分，缩放部分）

实例：map2.addControl(new BMap.OverviewControl({offset：new BMap.Size(10,20)，anchor:BMAP_ANCHOR_TOP_LEFT}))

5，自定义地图

打开百度地图个性在线编辑器：http://lbsyun.baidu.com/custom/

选择需要的元素，属性，样式。查看JSON

代码：

var mystyle1=json内容；

map.setMapStyle ( {styleJson:mystyle1} ) ;

6，向地图添加标注

*坐标点

var pints=new BMap.point(12.6363,54.25155);

var example=new BMap.Marker(points);

map2.addOverlay(example);

*信息框

var info={width:100,height:100,title:"beijing"}

var infowindow=new BMap.InfoWindow("world",info);

map2.openInfoWindow(infowindow,map2.getCenter());

7,添加监听标注事件

example.enableDragging();//允许标注被拖拽

example.addEventListener("dragend",function(e){

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

}// 事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target)

API还保证函数内的this指向触发（同时也是绑定）事件的API对象:

map2.addEventListener("zoomend",function(){ alert(this.getZoom())});//通过this获得地图放大级别

8，增加图层

var traffic=new BMap.TrafficLayer();

map2.addTileLayer(traffic);//添加

map2.removeTileLayer(traffic);

9，逆地址解析

map2.addEventListener("mouseover",function(e){

var x1=e.point.lng;

var x2=e.point.lat;

var location=new BMap.Geocoder();

location.getLocation(new BMap.Point(x1,x2),function(result){

if(result){

alert(result.address+x1+x2);

}});

});

10，路线规划(DrivingRoute驾车，TransitRoute公交,WalkingRoute步行）

var m1=document.getElementById("start");

var m2=document.getElementById("end");//此容器用于搜索

function search(){

var start1=m1.value;

var end1=m2.value;

var drving=new BMap.DrivingRoute(map2,

renderOptions:{

map:map2,

panel:"result2", //不同的路线结果文字叙述放在id为result2的容器里

autoViewports:true

})

driving.search(start1,end1);

}

<div id="result2" style=""></div>//此容器用于盛放不同的路线结果

如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。

11，全景图展现：

希望：实现在地图上输入起点和终点，进入全景模式能够自动导航。

添加全景控件：

var panorama=new BMap.Panorama();

panorama.setOffset(new BMap.Size(10,10));

map2.addControl(panorama);

注意：在添加全景控件时可能会失败，主要是密钥和浏览器的问题。密钥申请时有浏览器端，服务器端，安卓，微信小程序等，如果使用自己的电脑写demo，没有服务器，建议申请浏览器端密钥，将白皮？设置为*，使所有的都可以运行该密钥即可。

学到此处写个小demo,实现拖拽标注时，显示标注所在坐标的全景图。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
       body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
       #allmap{width:100%;height:500px;}
       p{margin-left:5px; font-size:14px;}
   </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AYvXznHSms7Dvx2C9zMxLEHOe99qA54g"></script>
   <title>显示全景控件</title>
</head>
<body>

<input id="start" type="text"></input>
<input id="end" type="text"></input>
<button onclick="search1()">搜索</button>
<div id="allmap"></div>
<p id="results">在地图上添加全景控件，点击全景控件进入全景图</p>
<div id="panorama" style="width:70%;height:600px;"></div>
<div id="panorama1" style="width:70%;height:600px;"></div>
<script type="text/javascript">

var map = new BMap.Map('allmap');
   map.centerAndZoom(new BMap.Point(120.305456, 31.570037), 12);
   map.enableScrollWheelZoom(true);//申请一个地图


   var marker=new BMap.Marker(new BMap.Point(120.305456, 31.570037));
   map.addOverlay(marker);
   marker.enableDragging();//添加一个标注控件
   marker.addEventListener("dragend",function(e){
   var m1=e.point.lng;
   var m2=e.point.lat;//获取控件移动后的坐标


   var panorama1 = new BMap.Panorama('panorama1', {
'disableIndoorSceneSwitchControl': true //室内全景
});
   panorama1.setPosition(new BMap.Point(m1, m2));
   panorama1.setPov({heading:-40,pitch:6});

var panorama =new BMap.Panorama("panorama",{'disableIndoorSceneSwitchControl': true});
   panorama.setPosition(new BMap.Point(m1, m2));
   panorama.setPov({heading:-40,pitch:6});//室外全景图
   });

</script>

</body>
</html>

百度地图api开发入门学习总结

猜你喜欢