bmaplib vue 调用_在vue项目中怎么调用Bmap

在vue项目里面引入百度地图api有两种方式，一个是官方文档提供

然后在webpack里面需要配置externals选项，设置外部扩展

externals: {

'BaiduMap': 'BMap'

}

在使用的时候，组件里面需要引入

import BaiduMap from 'BaiduMap'

mounted() {

var map = new BaiduMap.Map(xxx)

}

另一种是用vue-baidu-map

官方文档

具体引用查看文档

在这里说一个很重要的问题，就是使用vue-baidu-map的话，很多方法没有办法使用，这个时候需要引入外部文件或者库

比如，我们需要引入GeoUtils，方法参考上面第一种方法

index.html

webpack.base.conf.js

externals:{

'BMapLib': 'BMapLib'

}

组件引用

import BMapLib from 'BMapLib'

但是这里面我们很多时候需要用一个BMap，怎么办呢？

vue-baidu-map文档有一处说明

由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

使用方法：

export default {

data () {

return {

BMap: null

}

},

methods: {

handler ({BMap, map}) {

this.BMap = Bmap

}

}

}

这样我们就可以在methods方法里面使用Bmap了，this.BMap.Point(xxx, xxx)、this.BMap.Polygon(xxx)