vue中使用百度地图GL

wintelsui 2021-09-27

展开全文

一、第一种

第一步：在index.html 引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue使用百度地图GL</title>
    <script type="text/javascript" src="https://api.map.baidu.com/apiv=1.0&type=webgl&ak=AK&s=1"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

第二步：在webpack.base.conf.js配置文件中配置BMapGL

// 在webpack.base.conf.js配置文件中配置BMapGL,(创建BMapGL对象)，在module.exports 中与entry平级；

  externals: {
    'BMapGL': 'BMapGL'
  },

第三步：在地图组件中引入BMapGL

<template>
  <div id="container"> </div>
</template>

import BMapGL from 'BMapGL'

export default {
  methods: {
    initMap() {
      this.myMap = new BMapGL.Map("container"); // 创建Map实例
      this.myMap.centerAndZoom("上海市", 7); // 初始化地图,设置中心点坐标和地图级别
      this.myMap.setMinZoom(5);//最小地图级别
      this.myMap.setMaxZoom(9);//最大地图级别
      this.myMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.myMap.setMapStyleV2(mapStyle);//自定义个性化样式
      this.myMap.setTilt(45);//倾斜角
      this.myMap.setDisplayOptions({//遮罩层
        skyColors: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)"]//不显示
      });
    },
  }
}

二、第二种

bmpgl.js

//BMapGL
export function BMPGL(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      // eslint-disable-next-line
      resolve(BMapGL);
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

map.vue

<template>
  <div id="container"> </div>
</template>

import { BMPGL } from "@/components/map/bmpgl.js";
import custom_map from "@/components/map/custom_map.json";

export default {
  name: "map",
  data() {
    return {
      ak: "0qKQ", // 百度的地图密钥
      myMap: null,
      greenIcon: null,
      purpleIcon: null,
      yellowIcon: null,
      redIcon: null,
      point: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      //传入密钥获取地图回调
      BMPGL(this.ak)
        .then(BMapGL => {
          // 创建地图实例
          let map = new BMapGL.Map("container");
          // 初始化地图，设置中心点坐标和地图级别
          // new BMapGL.Point(118.477, 31.346)
          map.centerAndZoom("芜湖市", 12);
          //开启鼠标滚轮缩放
          map.enableScrollWheelZoom(true);
          map.setMinZoom(9);
          map.setMaxZoom(13);
          map.setTilt(85);
          map.setMapStyleV2({ styleJson: custom_map });
          map.setDisplayOptions({
            skyColors: ["rgba(0, 0, 0, 0)"]
          });
        })
    },
    // 地址解析
    getPoint(location) {
      return new Promise((resolve, reject) => {
        let myGeo = new BMapGL.Geocoder();
        let point = null;
        myGeo.getPoint(location, point => {
          resolve(point);
        });
      });
    },
    //创建标记
    createMaker(state, point, content, option) {
      let maker = null;
      let steelContent = `<div class="padding-left-10">
          <div>单位资产信息：${content.assetsInfo}</div>
        </div>`;
      maker = new BMapGL.Marker(point, { icon: this.greenIcon });
      maker.addEventListener("mouseover", function() {
        this.openInfoWindow(new BMapGL.InfoWindow(steelContent, option));
      });
      maker.addEventListener("mouseout", function() {
        this.closeInfoWindow();
      });
      return maker;
    }
  }
};

.home {
  position: relative;
  .allmap {
    width: 100%;
    height: 450px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
  }
  .point {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
  }
}

三、第三种

// 安装插件
npm install vue-bmap-gl vue-mapvgl -S

main.js

// 引入vue-bmap-gl
import VueBMap from "vue-bmap-gl";
import VueMapvgl from "vue-mapvgl";
import "vue-bmap-gl/dist/style.css";

Vue.use(VueBMap);
Vue.prototype.VueBMap = VueBMap;
Vue.use(VueMapvgl);
Vue.prototype.VueMapvgl = VueMapvgl;

// 初始化vue-bmap
VueBMap.initBMapApiLoader({
  // 百度的key
  ak: "0wVRYQ",//用自己的百度地图ak
  // 百度 sdk 版本，默认为 1.0
  v: "1.0"
});

html

<template>
  <div class="home">
    <!--创建地图容器-->
    <div id="container" class="allmap">
      <el-bmap
        class="bmap-box"
        :zoom="zoom"
        :center="center"
        :tilt="50"
        :vid="'bmap-vue'"
        :mapStyleV2="mapStyleV2"
      >
        <el-bmap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :vid="index"
          :offset="[0, 0]"
          :icon="marker.icon"
          :visible="marker.visible"
          :position="marker.position"
          :title="marker.title"
          :status="1"
          :events="{
            mouseover(e) {
              overkMarker(e, 1);
            },
            mouseout(e) {
              outMarker(e, 1);
            }
          }"
        ></el-bmap-marker>
        <!-- mouseover(e) {
              overkMarker(e, 1);
            },
            mouseout(e) {
              outMarker(e, 2);
            } -->
        <el-bmap-info-window
          :title="currentWindow.title"
          :position="currentWindow.position"
          :visible="currentWindow.visible"
          :enable-auto-pan="false"
        >
          <template>
            <div>单位类型1</div>
            <div>单位类型2</div>
          </template>
        </el-bmap-info-window>
      </el-bmap>
    </div>
    <!-- 左下角标记 -->
    <div class="point">
      <div>
        <span class="green"></span>
        <span>单位类型1</span>
      </div>
      <div>
        <span class="blue"></span>
        <span>单位类型2</span>
      </div>
      <div>
        <span class="yellow"></span>
        <span>单位类型3</span>
      </div>
      <div>
        <span class="red"></span>
        <span>单位类型4</span>
      </div>
    </div>
  </div>
</template>

//样式文件在我的资源中，也可自己在百度地图个性化中配置，配置地址 http://lbsyun.baidu.com/apiconsole/custommap
import mapStyleV2 from "@/components/map/mapStyleV2.js";

export default {
  name: "mymap",
  data() {
    let redIcon = require("@/assets/images/red.png");
    let yellowIcon = require("@/assets/images/yellow.png");
    let purpleIcon = require("@/assets/images/purple.png");
    let greenIcon = require("@/assets/images/green.png");

    return {
      greenIcon,
      purpleIcon,
      yellowIcon,
      redIcon,
      mapStyleV2,
      zoom: 11,
      center: [118.477, 31.346],
      markers: [
        {
          position: [118.377, 31.246],
          title: "单位类型2",
          visible: true,
          icon: {
            url: redIcon,
            size: [12, 12]
          }
        },
        {
          position: [118.5273285, 31.21515044],
          title: "单位类型1",
          visible: true,
          icon: {
            url: greenIcon,
            size: [12, 12]
          }
        }
      ],
      currentWindow: {
        title: "",
        position: [118.377, 31.546],
        content: "hello",
        visible: false
      }
    };
  },
  methods: {
    overkMarker(e) {
      console.log("mouseover");
      this.currentWindow = {
        title: "标题",
        position: [e.latLng.lng, e.latLng.lat],
        content: `<div>
          <div>单位类型1<div>
          <div>技术类型2<div>
        </div>`,
        visible: true
      };
    },
    outMarker(e) {
      console.log("outMarker");
      this.currentWindow.visible = false;
    },
  }
};

scss

.home {
  position: relative;
  .allmap {
    width: 100%;
    height: 450px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
  }
  .point {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
    .green{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(0, 255, 0);
      border-radius: 50%;
    }
    .red{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(255, 0, 0);
      border-radius: 50%;
    }
    .yellow{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(251, 255, 0);
      border-radius: 50%;
    }
    .blue{
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgb(247, 0, 255);
      border-radius: 50%;
    }
  }
}

效果图
在这里插入图片描述