百度地图方法

百度地图 的相关api总结仅供参考

---

前言

最近做了地图相关的项目简单总结一下百度地图相关的api，有什么问题欢迎留言讨论，以下内容仅供参考

---

初始化

 <div id="container" class="bm-map" ></div>

 var map = new BMapGL.Map("container");//初始化实例
    var point = new BMapGL.Point(lng,lat);//百度地图用来初始化点位的方法
    map.enableScrollWheelZoom();//开启缩放
    map.disableScrollWheelZoom();//禁止缩放
    map.disableDragging();//禁止拖拽
    map.enableDragging(); //开启拖拽 
    map.centerAndZoom(point, 14);//设置中心点和放大倍数
    map.setCenter()//设置中心点
    map.setZoom()//设置放大倍数
    map.getCenter()//获取中心点
    map.getZoom()//获取放大倍数
    map.addOverlay(allmap);//添加标记
    map.removeOverlay(allmap)//移除标记
    map.clearOverlays();//清理所有覆盖物
    allmap.disableMassClear();//禁止清除标记
    allmap.enableMassClear()；//恢复可以清除标记事件
    map.addEventListener("tilesloaded", function () {
    		//监听地图加载完成事件
			//callback内容； });
    map.removeEventListener("tilesloaded");//执行完成callback内容之后移除初监听事件
    map.addEventListener("click", function (e) {
     e.domEvent.stopPropagation();
     e.domEvent.cancelBubble = true; //阻止冒泡事件
    //点击事件的回调函数
    let point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);//拿到鼠标到达的位置
   })
  	map.addEventListener("mousemove", function (e) {
    //鼠标移动事件的回调函数   
    })
	
	var gc = new BMapGL.Geocoder();//行政区划归属获取
    gc.getLocation(point, function (rs) {
       regionName =
            rs.addressComponents.province +//所在的省份名称
            rs.addressComponents.city +     //所在的城市名称
            rs.addressComponents.district;	//所在的区县行政单位
         }
         ---------------------------------------------------------------
    var bd = new BMapGL.Boundary();//加轮廓线
      bd.get(regionName, function (rs) {//第一个参数是即将要操作的行政区域的名字 顺序：省-市-县（区）
        hole = new BMapGL.Polygon(rs.boundaries, {
          fillColor: "#144d7e",//填充颜色
          strokeColor: "#c3fb2b",//轮廓颜色
          strokeWeight: "1",//轮廓宽度
          fillOpacity: 0.3,//填充透明度
        });
        map.addOverlay(hole);
      }
	
	//------------------------------------------------------------------------------
	//添加一个icon标记
	  let usual = "static/image/status-usual.png";
      let myIcon = new BMapGL.Icon(usual, new BMapGL.Size(38, 40));
      // 更换标记图标
      let marker = new BMapGL.Marker(point, {
        icon: myIcon,
      });
      map.addOverlay(marker);
		对图标做点击事件
      marker.addEventListener("click", function (e) {
        e.domEvent.stopPropagation();
        e.domEvent.cancelBubble = true; //阻止冒泡事件 
      });   
------------------------------------------------------------------------
   //在地图上添加一条线覆盖物
    var polyline = new BMapGL.Polyline(pointArr, {
            strokeColor: color,
            strokeWeight: 15,
            strokeOpacity: 1,
          });
          map.addOverlay(polyline);
       polyline.addEventListener("click", function (e) {//线的点击事件
       //注意：线的点击事件目前没找到组织冒泡的方法 
       }
       -----------------------------------------------
       //添加自定义文本框
   var opts = {
           position: new BMapGL.Point( lng,lat ), // 指定文本标注所在的地理位置
           offset: new BMapGL.Size(0, 0), // 设置文本偏移量
          };
   var label = new BMapGL.Label(‘文本内容’, opts);
          // 自定义文本标注样式
          label.setStyle({
            color: "#fff",
            padding: "5px",
            fontSize: "14px",
            height: '30px',
            lineHeight: "30px",
            fontFamily: "微软雅黑",
            borderColor: "rgba(0, 4, 255, 0)",
            backgroundColor: "rgba(0, 4, 255, 0)",
          });
          map.addOverlay(label);




   

方法名	参数	描述
click	{type, target, point, pixel, overlay}	左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick
dblclick	{type, target, pixel, point}	鼠标双击地图时会触发此事件
rightclick	{type, target, point, pixel, overlay}	右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick
rightdblclick	{type, target, point, pixel, overlay}	右键双击地图时触发此事件
maptypechange	{type, target}	地图类型发生变化时触发此事件
mousemove	{type, target, point, pixel, overlay}	鼠标在地图区域移动过程中触发此事件
mouseover	{type, target}	鼠标移入地图区域时触发此事件
mouseout	{type, target}	鼠标移出地图区域时触发此事件
movestart	{type, target}	地图移动开始时触发此事件
moving	{type, target}	地图移动过程中触发此事件
moveend	{type, target}	地图移动结束时触发此事件
zoomstart	{type, target}	地图更改缩放级别开始时触发触发此事件
zoomend	{type, target}	地图更改缩放级别结束时触发触发此事件
addoverlay	{type, target}	当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
addcontrol	{type, target}	当使用Map.addControl()方法向地图中添加单个控件时会触发此事件
removecontrol	{type, target}	当使用Map.removeControl()方法移除单个控件时会触发此事件
removeoverlay	{type, target}	当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
clearoverlays	{type, target}	当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
addtilelayer	{type, target}	添加一个自定义地图图层时触发此事件
removetilelayer	{type, target}	移除一个自定义地图图层时触发此事件
load	{type, target, pixel, point, zoom}	调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件
touchstart	{type, target, point,pixel}	触摸开始时触发此事件，仅适用移动设备
touchmove	{type, target, point,pixel}	触摸移动时触发此事件，仅适用移动设备
touchend	{type, target, point,pixel}	触摸结束时触发此事件，仅适用移动设备
longpress	{type, target, point,pixel}	长按事件，仅适用移动设备

———————————————————————————————————————

原文链接

未完待续··········

总结

相关链接：
点击查看
拾取坐标系统
百度地图案例
地图的事件和方法总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了百度地图API的使用，