[vue-mapvgl]のインストール

vue-mapvgl は vue-bmap-gl に付属するレイヤー ライブラリであり、vue-bmap-gl も同時にインストールする必要があります。

必要

技術的なポイント

公式ウェブサイトのアドレス：component | vue-mapvgl

gitee アドレス: vue-mapvgl: Baidu マップの mapvgl コンポーネントの vue2 および vue3

インストール

npm install vue-bmap-gl --save

npm install vue-mapvgl --save

成し遂げる

<template>
  <div class="bmap-wrapper">
    <el-bmap vid="bmapDemo" :zoom="zoom" :center="center" class="bmap-demo">
      <el-bmapv-view :lazy="300">
          <el-bmapv-point-layer :lazy="2000" :zoom-threshold="[12,15]" :color="color" :shape="shape" :blend="blend" :size="size" :data="data" :enable-picked="true" :auto-select="true" :on-click="(e)=>{clickMarker(e)}"></el-bmapv-point-layer>
      </el-bmapv-view>
    </el-bmap>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      count: 1,
      zoom: 14,
      center: [121.5273285, 31.21515044],
      color: '#f00',
      shape: 'circle', // 默认为圆形 circle ，可传 square 改为正方形
      blend: 'lighter',
      size: 60,
      data: [
        {
          geometry: {
            type: 'POINT',
            coordinates: [121.5273285, 31.21515044]
          },
          properties: {
            id: '1'
          }
        },
        {
          geometry: {
            type: 'POINT',
            coordinates: [121.5483395, 31.21515154]
          }
        }
      ]
    }
  },
  methods: {
    clickMarker(e){
        console.log(e);
    }
  }
}
</script>
 
<style>
.bmap-wrapper {
  width: 500px;
  height: 500px;
}
</style>