百度地图开发实例番外篇--实用方法（持续更新）

一 前言

在使用百度地图开发的过程中，查阅百度地图官网demo基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解决方式总结出来写成这篇文章，供大家参考。

二 正文

1.设置完全透明

测试实例：多边形(polygon) 圆(circle)
出现的问题：配置对象(PolygonOptions)fillOpacity设置为0； 仍然会出线白色填充，没有实现完全透明：

const points = [ ... ];//一系列百度坐标
const opts = {fillOpacity:0,strokeColor:balck,strokeOpacity:1};
const polygon = new BMap.Polygon(points,opts);

结果：

方法：使用setFillColor设置填充

const polygon = new BMap.Polygon(...opts);//创建多边形实例
polygon.setFillColor('');//设置多边形填充完全透明

2.添加地面叠加层

测试实例：地面叠加层(GroundOverlay)
出现的问题：按照类参考的参数配置(GroundOverlayOptions)，并没有加载出图片。

  const opts = {
    opacity: 1,
    imageURL:'http://lbsyun.baidu.com/jsdemo/img/si-huan.png',
    displayOnMinLevel: 0,
    displayOnMaxLevel: 20,
  };
  const groundOverlay = new BMap.GroundOverlay(bounds, opts);
  

后来查看官方demo才发现如何配置：setImageURL

  // 西南角和东北角
  var SW = new BMap.Point(116.29579,39.837146);
  var NE = new BMap.Point(116.475451,39.9764);

  groundOverlayOptions = {
    opacity: 1,
    displayOnMinLevel: 10,
    displayOnMaxLevel: 14
  }
  // 初始化GroundOverlay
  var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
  // 设置GroundOverlay的图片地址     groundOverlay.setImageURL('http://lbsyun.baidu.com/jsdemo/img/si-huan.png');

3.跟随地图放缩

百度地图上Marker类型设置简单，可以使用自己定义的图标，还支持对图标的偏移和旋转，但是因为它只根据了一个中心点，造成了一个问题，设置的图标自身不支持跟随地图进行放缩。这样就造成了在特定场景下无法满足业务的需求。
百度地图地面叠加层GroundOverlay可以设置自己的图标，因为它是根据经纬度范围设置的，所以支持跟随地图放缩。但是在javascript开发中它并不支持对图形的旋转。图形的旋转可以用C++或者JAVA对图形矩阵做变换得到。所以想要支持旋转的就无法实现了。
如果我想设计一个既支持放缩，又能设置旋转的旗标，那该怎么办呢？
有一种方案：
Marker + addEventListener('zoomEnd',function(){});使用Marker类型，并且监听地图放缩事件，动态设置图标大小。

4.覆盖物重叠时的层级显示问题

正如百度地图人员回答的那样，百度地图在覆盖物重叠时会有一个默认的层级显示顺序，目前并不支持对任何单个实例设置显示层级。
但是事实上也没有那么悲惨，百度还是提供了两种覆盖物类型Marker(setZIndex)和Label(setZIndex)，一种自定义图层(TileLayer)来支持设置ZIndex，但是需要注意的是这是针对一类中不同实例的，如果不同类型重叠的话，还是解决不了。

对于Marker和Label：setZIndex
对于TileLayer:zIndex

它们会根据这个值的大小来排列显示层次的优先级，值越大，就会显示在越上层。

在marker实例中，有时需要放大一个正在被选中的图标（始终保持一个放大），这就要求这个选中的实例始终出现在最顶层，这时候有一个非常实用的方法：setTop(isTop: Boolean) 详情>>

5.在vue中使用外链的百度地图

在vue组件中使用百度地图很多人会选择使用第三方库，例如：vue-baidu-map。
如果在使用中出现了无法逾越的问题，请看这里：直接用百度地图库在vue组件中完美运行。
参考文章：vue调用百度地图api时Bmap没有定义的解决办法

引入百度地图：