好记性不如破键盘之百度地图API
1:异步加载
<html>
<head>
<meta charset="utf-8"/>
<title>title>
<script type="text/javascript">
function initialize(){
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(120,411,21.200),18);
}
function loadScript(){
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=秘钥&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
script>
head>
<body>
<div id="map" style="width:500px; height:200px">div>
body>
html> 1.1 meta标签是为了让页面以正常的比例显示在移动端
1.2命名空间API使用BMap作为命名空间
1.3 map.centerAndZoom(point , ):在创建地图实例后，需要对其进行初始化，point类描述了一个地理坐标点，在使用JavaScript API服务是，需使用百度BD09坐标
2:地图配置和操作
var map = new BMap.Map("container");
var point = new BMap.Point(110.250,30,800);
window.setTimeout(function(){
map.panTo(new BMap.Point(110.350,30,900));
},1000);2.1:map.enableScrollWheelZoom方法可以开启鼠标滚轮缩放操作
2.2:map.panTo()方法将让地图平滑移动至新中心点，如果距离超过了区域大小，则地图回跳到该点
3：地图控件
3.1:Control:控件的抽象基类
3.2:NavigationControl:地图平移缩放控件
3.3:OverviewMapControl:缩放地图控件
3.4:ScaleControl:比例尺控件
3.5:MapTypeControl:地图类型控件
3.6:CopyrigControl:版权控件
3.7:GeolocationControl:定位控件
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(110.404,30.800),10);
map.addControl(new BMap.NavigationControl());4:自定义控件
function ZoomControl(){
//设置偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defacultOffset = new BMap.Size(10,10);
}
//通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
5:地图覆盖物
5.1:Overlay:覆盖物的抽象基类
5.2:Marker:标注表示地图上的点，可自定义标注的图标
5.3:Label:表示地图上的文本标注
5.4:Polyline:表示地图上的折线
5.5:Polygon:表示地图上的多边形，类似于闭合的折线
5.6:Circle:表示地图上的圆
5.7:IntoWindow:信息窗口也是一种特殊的覆盖物
var map = new BMap.Map("container");
var point = new BMap.Point(110.404,30,800);
map.centerAndZoom(point, );
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker); //将标注添加到地图中
//创建标注图标
function addMarker(point,index); //创建自定义函数,创建标注
var myIcon = new BMap.Icon("marker.png",new BMap.Size(20,20),{
var marker = new BMap.Marekr(point,{icon,myIcon});
}
//可拖拽的标注
marker.enableDragging();
marker.addEventListener("dragend",function(e){
alert("当前位置" + e.point.lng+","+e.point.lat);
});
//释放内存
map.removeOverlay(marker);
marker.dispose();
//信息窗口
var polyline = new BMap.Pilyline([
new BMap.Point(110.250,30.600),
new BMap.Point(110.350,30.700)
],
{strokerColor:"blue",strokerWeight:6,strokerOpacity:0.5}
);
map.addOverlay(polyline);
//折线
var polyline = new BMap.Polyline([
new BMap.Point(100.300,20.300),
new BMap.Point(200.300,49.500)
],
{strokeColor:"blue",strokerWeight:6,strokerOpacity:0.5}
);
map.addOverlay(polyline);自定义覆盖物
//定义自定义覆盖物的构造函数
function SquareOverlay(center,length,color){
this._center = center;
this._length = length;
this._color = color;
}
//继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
6:事件
//事件监听
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(100.300,30.500),22);
map.addEventListener("click",function(){
alert("didi");
});//地图图层
var map new BMap.Map("map"); //创建地图实例
var point = new BMap.Point(100.400,30.400); //创建点坐标
map.centerAndZoom(point,13); //初始化地图，设置中心店坐标和地图级别
var traffic = new BMap.TrafficLayer(); //将图层添加到图层上去
//移除图层
map.removeTileLayer(traffic); //将图层移除
7：地图工具
7.1:MarkerTool:标注工具
7.2:MarkerClusterer:多标注聚合器
7.3:MarkerManaer:标注管理工具
7.4:RichMarker:富标注工具
7.5:DistanceTool:测距工具
7.6:RectangleZoom:区域缩放工具
7.7:MapWrapper:地图搬家工具
7.8:InfoBox:自定义信息窗口工具
7.9:LuShu:轨迹运动工具
7.0:AreaRestriction:区域限制工具
7.1:GeoUtils:集合运算工具
7.2:TrafficControl:实时交通工具
7.3:SearchControl:检索控件
7.4:DrawingManager:鼠标绘制工具
7.5:EventWrapper:事件封装工具
7.6:TextIconOverlay:自定义覆盖物工具
7.7:SearchInReactangle:拉框缩放工具
7.8:SearchInWindow:百度地图样式的信息窗口工具
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(110.400,30.500),10);
var myDrag = new BMapLib.DragAndZoomTool(map,{
followText :"haha"
});8:地图服务
8.1:LocalSearch:本地搜索
TransitRoute:公交导航
DrivingRoute:驾车导航
WalkingRoute:步行导航
Geocoder:地址解析
LocalCity:本地城市
TrafficControl:实时路况控件
//本地搜索
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(100.400,40.599),12);
var local = new BMap.LocalSearch(map,{
renderOptions:{map:map}
});
local.search("赛博坦");
//结果面板
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(110.400,49.500),2);
var local = new BMap.LocalSearch(map,
{renderOptions:{map:map.panel:"results"}};
local.search("赛博坦2");
//数据接口
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(110.300,30.600),20);
var options = {
onSearchComplete:function(results){
if(driving.getStatus() == BMAP+STATUS_SUCCESS){
//获得第一条方案
var route = results.getPlan(0);
//获得方案的驾车路线
var route = plan.getRoute(0);
//获得每个关键不走，并输出到页面
var s = [];
for(var i =0;i< route.getNumSteps(); i++){
var step = route.getStep(i);
s.push((i + 1)+"."+step.getDescription());
}
document.getElementById("log").innerHTML =s.join("
");
}
}
};
var driving = new BMap.DrivingRoute(map,options);
driving.search("赛博坦","赛博坦2");