好记性不如破键盘之百度地图API

最新推荐文章于 2023-02-14 03:00:00 发布

shi-Yjanuary

最新推荐文章于 2023-02-14 03:00:00 发布

阅读量696

点赞数

分类专栏： MAP-API 文章标签： api 百度地图

MAP-API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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("<br>");
   }
 }
};
var driving = new BMap.DrivingRoute(map,options);
driving.search("赛博坦","赛博坦2");

shi-Yjanuary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
好记性不如破键盘之百度地图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
复制链接

扫一扫