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

一 前言

在使用百度地图开发的过程当中，查阅百度地图官网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没有定义的解决办法

引入百度地图：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

解决Eslint对BMap等地图相关变量报错的问题：

.eslintrc文件：

module.exports = {
 ... ...
    "globals": {
      //为百度地图设置规则
      "BMap": true,
      "BMAP_NORMAL_MAP": true,
      "BMAP_HYBRID_MAP":true,
      "BMAP_ANCHOR_TOP_LEFT":true,
      "BMAP_ANCHOR_TOP_RIGHT":true,
      ...
  },
}

先看看普通使用方式（没有使用异步加载）带来的错误：

在百度地图还未加载完成时就调用了百度地图的方法。
实现方案：相似于异步加载

map.js文件：

export default {   
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=您的密钥";
    //console.log("初始化百度地图脚本...");   
    return new Promise((resolve, reject) => {  
      // 若是已加载直接返回  
      if(typeof BMap !== "undefined") {  
        resolve(BMap);  
        return true;  
      }  
      // 百度地图异步加载回调处理  
      window.onBMapCallback = function () {  
        console.log("百度地图脚本初始化成功...");  
        resolve(BMap);  
      };  
  
      // 插入script脚本  
      let scriptNode = document.createElement("script");  
      scriptNode.setAttribute("type", "text/javascript");  
      scriptNode.setAttribute("src", BMap_URL);  
      document.body.appendChild(scriptNode);  
    });  
}

组件中调用方式：

import {MP} from './map.js'；

mounted(){  
            this.$nextTick(function(){  
              var _this = this;  
              MP(_this.ak).then(BMap => {  
                          //在此调用api  
  
  }）

这样就能够完美运行了。

6.地图项目在测试或者线上环境出现跨域访问问题

你在本地测试都OK，到了远程服务器上就出错了。这里多是服务器在安全策略上作了限制。
你检查一下script src 的地址 协议是http仍是https，若是是http就会出错，直接改为https就行了。和http同样都支持地图方法，而且更安全。

7.地图绘制图层映射到地图上的地理位置

在使用地图进行绘图的时候，一般采用的方案是在地图上面放一个图层用来让用户选择绘制的位置，当用户确在此处绘制时就须要开发员拿到此处的经纬度来做为图标中心点进行调用百度地图API绘制各类类型的实例。
那么如何肯定这个经纬度呢？这里须要引用一个相对运动的方法：将地图和view图层放在同一个容器里，让view图层始终在容器的中心点上（内水平垂直居中），保持view图层位置不变，让用户拖动地图--这样就能让view层保持在地图的中心位置。而后能够调用百度地图API getCenter方法拿到当前的中心点坐标，也就是须要画上去的图标的中心经纬度。

8.慎用GroundOverlay类型

先说一下经常使用到的Marker和GroundOverlay类型。
（1）Marker

特色：支持ICON的旋转
缺点：改变zoom值时ICON不会缩放

（2）GroundOverlay

特色：改变zoom值时ICON会自动缩放
缺点：不支持ICON的旋转

为何说慎用GroundOverlay类型？其实全部的GroundOverlay类型均可以用Marker来替代，可使用本文标题3介绍的方法控制Marker的缩放。还有其余缘由以下：
（1）因为GroundOverlay类型ICON的缩放由百度地图本身控制，在有些状况下总会有个别ICON会缩放失效。（作过的项目中遇到过这个问题）
（2）没法逐级控制在哪一个zoom下显示多大
（3）经纬度范围并不容易控制

9.一些很是有用的库

map库是最基本的库，用它来实例话一个map对象，在页面上展现一幅地图。除了这个地图库以外，还有不少实用的库。具体参考：开源库

下面就我用到过的几个来讲明一下：
（1）鼠标绘制工具条库
提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑，用户可以使用JavaScript API对应覆盖物（点、线、面等）类接口对其进行属性（如颜色、线宽等）设置、编辑（如开启线顶点编辑等）等功能。
也就是说用户有自主绘制的权利，而且在完成绘制的时刻，开发者是能获取到经纬度的，这就足够了。

（2）几何运算
GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。 主入口类是GeoUtils。
最实用的就是使用库里的类方法能够判断点在不在多边形内啦～～～

（3）聚合marker
MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提升性能。 主入口类是MarkerClusterer。
当marker数量特变多，十分密集的时候，会产生性能问题和堆积问题，这时候作个聚合是十分有用的方式。

（4）还有更多等待探索。。。

三 后记

使用百度地图就要遵照百度地图的上支持的方法方式，目前百度地图在图层重叠时的层级显示问题并无作出用户自定义设置方案，对于label和marker却是暴露了setZindex方法设置本身的层级。但愿百度地图可以愈来愈强大，这样开发者就能够愉快的开发了～