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

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 源著

Languages

• 中文
• English-Not available

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 [email protected]