百度地图JavaScript API GL常用方法封装

引入百度js库

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的百度应用ak"></script>

封装方法

<template>
  <div class="map">
    <div id="container" class="container"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map:null,
    }
  },
  props: {
    position: {//初始位置
      type: Object,
      default: () => {
        return { lng: 116.40334547586404, lat: 39.92386800168819 };
      }
    },
    firingLngLat:{//启用鼠标监听
      type:Boolean,
      default:false
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      this.map = new BMapGL.Map('container'); 
      this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小
      var point = new BMapGL.Point(this.position.lng,this.position.lat); // 改变坐标居中位置
      this.map.centerAndZoom(point, 10);
      if(this.firingLngLat){
         this.getLngLat()
      }
    },
    getMap(items){//接受的数组类型，点击标记点，返回对应的数据     基础数据=>[{longitude：经度，latitude：维度，name:标记名}]
      // console.log(items);
      let data = items
      this.charMap()
      if(data.length){
        items.forEach((item,idnex) => {
          var point = new BMapGL.Point(item.longitude,item.latitude); // 创建点坐标
          this.map.centerAndZoom(point, 15);
          let img = require("@/assets/images/yard.png")
          var myIcon = new BMapGL.Icon(img, new BMapGL.Size(56, 56), {    
            imageOffset: new BMapGL.Size(0, 0 )   // 设置图片偏移   
          });     
          // 创建标注对象并添加到地图  
          var marker = new BMapGL.Marker(point, {icon: myIcon});   
          this.map.addOverlay(marker); 

          //添加文字车牌提示
          var optsName = {
              position: new BMapGL.Point(item.longitude ,item.latitude), // 指定文本标注所在的地理位置
              offset: new BMapGL.Size(-40, -50) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMapGL.Label(item.name , optsName);
          // 自定义文本标注样式
          label.setStyle({
            color: 'blue',
            borderColor: '#ccc',
            fontSize: '16px',
            height: '30px',
            lineHeight: '30px',
            fontFamily: '微软雅黑'
          });
          this.map.addOverlay(label);
          marker.addEventListener("click", ()=>{
            this.$emit('click',item)
          })
        });
      }
    },
    charMap(){//删除所有的标记点
      //获取地图上所有的覆盖物
      var allOverlay = this.map.getOverlays();
      for(var i = 0;i<allOverlay.length;i++) {
        if(allOverlay[i].toString()){
          // console.log(allOverlay[i]);
            this.map.removeOverlay(allOverlay[i]);
        }
      }
    },
    getLngLat(){//获取鼠标点击后的经纬度，并标记 注：只有firingLngLat 为true,该监听方法才能生效
      this.charMap() 
      this.map.addEventListener('click',  (e)=> {
        // alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
        // console.log('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
        let mapll = {
          lng:e.latlng.lng,
          lat:e.latlng.lat
        }
        this.$emit("change",mapll)
        let data =[{
          name:"标记点位置",
          longitude:e.latlng.lng,
          latitude:e.latlng.lat
        }]
        this.getMap(data)
      })
     
    },
    
  }
}
</script>
<style lang="stylus" scoped>
.map
  width 100%
  height 100%
  border: 1px solid #cccccc99
  .container
    width 100%
    height 100%
</style>

使用方式

//div使用
<my-map  :position="position" @click="myMapClick"   @change="getPostion" :firingLngLat="true"   ref="maps" ></my-map>

//引入上方封装的路径
import myMap from "@/components/map/maps";
components: { myMap},

//参数及方法说明
position:{//默认经纬度
  lng:0,
  lat:0,
},
myMapClick(item){},//点击标注获取标注信息
getPostion(item){},//点击地图获取点击位置，firingLngLat=treu,该方法才执行

this.$refs.maps.getMap([{longitude：经度，latitude：维度，name:标记名}]),//回显,接受的是一个数组