Skip to content

ronliruonan/vue-baidu-mapgl

 
 

Repository files navigation

Baidu Map GL components for Vue 2.x

npm Travis Package Quality npm license

Baidu Map GL

选择vue-baidu-map-plus的理由

如果你的项目中已经在使用 vue-baidu-map, 那么当前就是你最佳的选择( 因为fork了源项目,100%保留/兼容了原有的功能组件,仅最小范围升级GL版本 )

重复轮子吗

因为项目中使用了Lite版本百度地图 vue-baidu-map,与业务实际对照百度地图官网有多差异,为保持用户体感一致,考虑使用Baidu MapGL版本。
考虑成本问题,直接直接fork原作者,升级为百度地图 GL版本,待完善ing.

vue-baidu-map的继承对比

todo

文档

https://ronliruonan.github.io/vue-baidu-mapgl/#/zh/index



### Installation
npm i vue-baidu-map-plus

Initialization

import Vue from 'vue'
import BMapGL from 'vue-baidu-map-plus';

Vue.use(BMapGL, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'YOUR_APP_KEY'
})

Usage

<template>
  <bmap-gl style="height:75vh;" class="map" :zoom="19" scrollWheelZoom :center="{lng: 116.432809, lat: 39.96858}" @ready="readyHandler">
  </bmap-gl>
</template>

<script>
data () {
  return {
    mapInstance: null
  };
},
methods: {
  readyHandler ({ BMapGL, map }) {
    this.mapInstance = map
  },
}
</script>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

Thanks & vue-baidu-map 源著

Baidu Map components for Vue 2.x

npm Travis Package Quality npm license

Languages

Documentation

https://dafrok.github.io/vue-baidu-map

Get Start

Installation

npm i --save vue-baidu-map

Initialization

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: 'YOUR_APP_KEY'
})

Usage

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

Contributing

Contributing Guide

License

MIT License

Copyright (c) 2016-present, Dafrok o.o@mug.dog

Packages

No packages published

Languages

  • Vue 77.0%
  • JavaScript 23.0%