腾讯地图Javascript Api GL版本2021/03/15目前为止不支持自定义控件，使用css定位自定义工具栏控件

腾讯地图Javascript Api GL是2020年5月份左右发布的；所以api灵活度都没腾讯地图javascript api V2版本的那么多功能和灵活；但是新的版本利用了h5的特性和web gl来绘制的地图，性能和效果都会比较好；

由于要实现一些自定义的控件，官网找了很久都没找到可以自定控件的，官网的都是那几个默认控件的位置设置的api；所以只能自己实现自定义控件；
预览图：

思路：
1、既然目前不支持自定义组件，换个思路我们就自己利用绝对定位来定位这些自定义组件；
2、position:absolute;然后index设置高一点；z-index：1002即可；
3、在这些图标上设置点击或者触摸事件就可以了

部分代码：

```html
<template>
  <div style="height: 100%;position: relative;overflow-y: hidden">
    <!--自己封装的组件-->
    <Map ref="map" @clickMarkerCallFun="clickMarkerCallFun" style="height: 400px;"></Map>
    <div style="overflow-y: auto" class="list">
      <OrderInfoList ref="orderInfoList" @pointToCenterFun="pointToCenterFun"></OrderInfoList>
    </div>
    <div class="tool">
      <ToolsList ref="toolList" @infoFun="infoFun" @locationFun="locationFun" @lukuangFun="lukuangFun"></ToolsList>
    </div>
  
  </div>

</template>

css:

```css
<style scoped lang="scss" type="text/css" rel="stylesheet/scss">
.list {
  height: calc(100% - 400px - 40px);
  overflow-y: auto;
}

.tool {
  position: absolute;
  z-index: 1001;
  width: 45px;
  top: 100px;
  right: 20px;
  /* background: rgb(4, 198, 166); */
}


.componentsList {
  width: calc(100% - 40px);
  height: 100%;
//calc(100% - 400px - 40px);
  overflow-y: auto;
  position: absolute;
  left: 0px;
  z-index: 1003;
  bottom: 0px;
}


</style>