vue使用腾讯地图（覆盖物）

在index.html里引入包 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=key"></script><!--引入腾讯地图-->

<template>
  <div class="ordre_detail">
    <div id="orderMap" style="width:375px;height:500px;">

    </div>
    <div class="div_top_info" ref="div_top_info">
      shjdhjsd
      <div id="tipClick" @click="click1()">点击</div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.init();
  },
  data(){
    return{
      map:'',
      div:'',
    }
  },
  methods: {
    init() {
      let myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
      let myOptions = {
        draggable: true,
        scrollwheel: true,
        zoom: 13, //设置地图缩放级别
        center: myLatlng, //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
      };
      let map = new qq.maps.Map(document.getElementById("orderMap"), myOptions);
      this.map = map;
      this.initOverLay();
      this.div=this.$refs.div_top_info
      debugger
    },
    initOverLay() {
      let overLay = new qq.maps.Overlay();
      //定义construct,实现这个接口来初始化自定义的Dom元素
      overLay.construct = ()=> {
        // this.div = document.createElement("div");
        // var divStyle = this.div.style;
        //   divStyle.position = "absolute";
        //   divStyle.width = "24px";
        //   divStyle.height = "24px";
        //   divStyle.backgroundColor = "#FFFFFF";
        //   divStyle.border = "1px solid #000000";
        //   divStyle.textAlign = "center";
        //   divStyle.lineHeight = "24px";
        //   divStyle.borderRadius = "15px";
        //   divStyle.cursor = "pointer";
        //   this.div.innerHTML = 'heihiehei';
            //将dom添加到覆盖物层
        //将dom添加到覆盖物层
        var panes = overLay.getPanes();
        //设置panes的层级，overlayMouseTarget可接收点击事件
        panes.overlayMouseTarget.appendChild(this.div);

        var self = this;
        this.div.onclick = ()=> {
          alert(0);
        };
      };
      //实现draw接口来绘制和更新自定义的dom元素
      overLay.draw = (_this)=> {
        var overlayProjection = overLay.getProjection();
        //返回覆盖物容器的相对像素坐标
        // var pixel = overlayProjection.fromLatLngToDivPixel(0);
        var divStyle = this.div.style;
        divStyle.left = 0 + "px";//--------------------------根据经纬度定位。
        divStyle.top = 0 + "px";
      };
      //实现destroy接口来删除自定义的Dom元素，此方法会在setMap(null)后被调用
      overLay.destroy = ()=> {
        this.div.onclick = null;
        this.div.parentNode.removeChild(this.div);
        this.div = null;
      };

      overLay.setMap(this.map);
    },
    click1(){
      alert('111')
    }
  },
  
};
</script>
<style scoped lang="scss">
// @import "~@/theme/views/order-desc";
#orderMap {
  position: relative;
}
// .div_top_info { // -------------------------2，如果不是设计到经纬度的覆盖物的话 可以 直接定位处理。
//   position: absolute;
//   top: 0;
// }
</style>

参考腾讯Api-覆盖物