在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)

Logo

前往低代码交流专区

更多推荐