百度地图使用记录

loadBaiduMap.js

代码语言：javascript复制

export default function loadBaiduMap(ak) {
    return new Promise(function (resolve, reject) {
        // window.onload = function () {
        //     resolve(BMapGL)
        // }
        window.init = function(){
            resolve(BMapGL)
        }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = `http://api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=init`
        // script.src = "http://api.map.baidu.com/api?v=2.0&ak="   ak   "&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);
    })
}

代码语言：javascript复制

<template>
  <div>
    baidu
    <el-button @click="clearMarkers">清除点</el-button>
    <div id="BDMap" style="height: calc(100vh - 200px)"></div>
     <InfoWindow ref="infoWindow" v-show="showinfoWindow"/>
  </div>
 
</template>

<script>
import loadMap from "@/assets/js/loadBaiduMap.js";
import InfoWindow from "@/components/BaiduInforWindow.vue"
export default {
  components:{InfoWindow},
  data() {
    return {
      showinfoWindow:false,
      BDMap:null,
      markers:[],
      markerList:[{name:"标记点1",lng:119.984933,lat:31.77332,id:"001"},{name:"标记点2标记点2",lng:119.978035,lat:31.790264,id:"002"}],
      
      baiduKey: "m4ryezjGKNVeNuMiviQx1cLGNrinVItK",
    };
  },
  methods: {
    clearMarkers(){
      console.log(this.markers)
      this.markers.forEach(item=>{
        this.BDMap.removeOverlay(item)
      })
      this.markers = []
    },
    drawMarkers(){
      this.markerList.forEach((item,index)=>{
        let myIcon = new BMapGL.Icon(require("@/assets/imgs/MapOnline.png"),new BMapGL.Size(20,27),{anchor:new BMapGL.Size(10,27)})
        let pointer = new BMapGL.Point(item.lng,item.lat)
        let marker = new BMapGL.Marker(pointer,{icon:myIcon})
        let label = new BMapGL.Label(item.name,{position:pointer,offset:new BMapGL.Size(0,0)})
        label.setStyle({
          color:"red",
          // color: "#fff",
          // backgroundColor: "#333333",
          // border: "0",
          // fontSize : "14px",
          // width:"200px",
          // opacity:"0.8",
          // textAlign:"center",
          // verticalAlign:"center",
          // borderRadius: "2px",
          // whiteSpace:"normal",
          // wordWrap:"break-word",
          // padding:"7px",
          transform:'translateX(-50%)'
        })
        marker.setLabel(label)
        marker.extraData = {id:item.id,name:item.name}
        this.BDMap.addOverlay(marker)
        var sContent= `<div>信息窗口测试</div>`
       
        marker.addEventListener("click",(e)=>{
          console.log(e.target)
          this.markerClick(e)
        })
        this.markers.push(marker)
      })
    },
    markerClick(e){
       console.log(e.target.extraData.id)
       var infoWindow = new BMapGL.InfoWindow(this.$refs.infoWindow.$el,{offset: new BMapGL.Size(100, 100)})
        this.showinfoWindow = true  
        infoWindow.setTitle(e.target.extraData.name)     
        e.target.openInfoWindow(infoWindow)
        this.$nextTick(()=>{
          infoWindow.redraw()
        })
        this.$refs.infoWindow.initialize({
          id:e.target.extraData.id
        })
        // 监听信息窗口关闭时执行的代码
        infoWindow.addEventListener("close",()=>{
          console.log("关闭")
        })
        // 信息窗口关闭
        // setTimeout(() => {
        //   infoWindow.close()
        // }, 2000);
    },
    showMap(){
      loadMap(this.baiduKey).then((BMapGL)=>{
        this.BDMap = new BMapGL.Map("BDMap", {
          coordsType: 5, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
          // 指定完成后API将以指定的坐标类型处理您传入的坐标
        }); // 创建地图实例
        var point = new BMapGL.Point(119.978035,31.790264); // 创建点坐标
        this.BDMap.centerAndZoom(point, 15);
        this.BDMap.enableScrollWheelZoom(true)
        this.drawMarkers()
        // let myIcon = new BMapGL.Icon(require("@/assets/imgs/MapOnline.png"),new BMapGL.Size(19,27))
        // let marker = new BMapGL.Marker(new BMapGL.Point(119.978035,31.790264),{icon:myIcon})
        // BDMap.addOverlay(marker)
      })
    }
  },

  mounted() {
    this.showMap();
  },
};
</script>

<style>
/* .v-modal{z-index:5 !important;} */
.amap-sug-result {
  z-index: 2024;
}
</style>

<style scoped>
/deep/ .BMap_bubble_top{border-bottom:1px solid red;}
/deep/ .BMap_bubble_bottom img{display:none;}
</style>

百度地图

0 人点赞