vue-bmap-gl vue3 版本正式发布

栏目: 软件资讯 · 发布时间: 1周前

来源: 开源中国社区

内容简介:vue-bmap-gl 是一个基于vue和百度地图GL版本封装的vue地图组件库,提供了常用组件封装。 本次更新 组件全面升级支持vue3 代码使用typescript重写 增加IDE提示文件,快捷开发 文档全面更新,使用vuepress 2.0版本重...

本文转载自:https://www.oschina.net/news/178548,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

vue-bmap-gl 是一个基于vue和百度地图GL版本封装的vue地图组件库,提供了常用组件封装。

本次更新

  • 组件全面升级支持vue3
  • 代码使用typescript重写
  • 增加IDE提示文件,快捷开发
  • 文档全面更新,使用vuepress 2.0版本重新编写。文档地址
  • 支持treeshake

破坏性变更

  • 库加载方式调整,需使用vue3的方式进行注册库
  • infoWindow的visible属性不再支持.sync使用,需要调整为v-model:visible
  • 移除bmapManager,获取地图实例的方式将只支持ref和绑定init事件
  • 移除所有组件events属性,事件绑定使用v-on形式

NPM安装

npm install vue-bmap-gl@next --save

引入组件

import App from './App.vue'
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
    ak: 'YOUR_KEY'
})

createApp(App)
    .use(VueBMap)
    .mount('#app')

示例

<template>
  <div class="bmap-page-container">
    <el-bmap
      ref="map"
      :lazy="2000"
      :map-style-v2="darkStyle"
      :preserve-drawing-buffer="true"
      :min-zoom="10"
      :max-zoom="22"
      :tilt="tilt"
      :heading="heading"
      :center="center"
      :zoom="zoom"
      ,@click="click"
      @tilesloaded="tilesloaded"
    />
  </div>
  <div class="control-container">
    <button @click="getMap()">
      获取地图示例
    </button>
  </div>
</template>


<script lang="ts">
import {defineComponent} from "vue";
import darkStyle from '../../../assets/mapStyle'

export default defineComponent({
  data() {
    return {
      zoom: 16,
      center: [121.59996, 31.197646],
      tilt: 60,
      heading: 0,
      darkStyle,
      timer: null,
    };
  },
  mounted() {
    const change = () =>{
      clearTimeout(this.timer);
      window.removeEventListener('hashchange',change)
    }
    window.addEventListener('hashchange',change)
  },
  methods: {
    getMap() {
      // bmap vue component
      // 百度 map instance
      console.log(this.$refs.map.$$getInstance());
    },
    panMap() {
      this.timer = setTimeout( () => {
        this.center = [(this.center[0]+0.0001), this.center[1]];
        this.panMap();
      },1000);
    },
    click(){
      alert('map clicked');
    },
    tilesloaded(e){
      console.log('tilesloaded')
    }
  }
})
</script>

 


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Kafka技术内幕

Kafka技术内幕

郑奇煌 / 人民邮电出版社 / 2017-11 / 119.00元

Kafka自LinkedIn开源以来就以高性能、高吞吐量、分布式的特性著称,本书以0.10版本的源码为基础,深入分析了Kafka的设计与实现,包括生产者和消费者的消息处理流程,新旧消费者不同的设计方式,存储层的实现,协调者和控制器如何确保Kafka集群的分布式和容错特性,两种同步集群工具MirrorMaker和uReplicator,流处理的两种API以及Kafka的一些高级特性等。一起来看看 《Kafka技术内幕》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具