(1)在index.html文件中引入百度地图

脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/API？v=2.0ak=pix q5 cghfqeefqcvbhhbffe 6h jf7l 4zw '/脚本

(2)在webpack.base.conf.js文件内添加外部选项，在模块。导出内部，和进入平级；

外部s : { ' BMap ' : ' BMap ' }(9501 . 163.com)

(3)添加地图组件BMapComponent.vue，这里主要注意两点：

a)使用骨髓酸性磷酸酶的时候需要导入（经过本人测试，如果不用进口会提示骨髓酸性磷酸酶未定义)

b)注意一定要给骨髓酸性磷酸酶的差异设置高度，否则会看不见

该组件的代码如下

！-页面模版模板div！-header-com-header : title=' header data。title ' : tolink='标头数据。tolink '/com-header！-标题结束-!-container-div id=' all map ' style=' width : 100%；高度：200 pxborder: 1px纯灰色；'overflow:hidden'/div！-容器结束-/div/template script import comHeader from ' components/comHeader ' import BMap from ' BMap ' export default { components 3360 { comHeader }，data :()=({ header data : { title : }网点详情，toLink: '/SalesOutlets' } })，已创建(){ //组件创建完后获取数据，这里和1.0不一样，改成了这个样子this.loadMap() //this.ready() //如果在此处直接调用this.ready()方法，将无法加载地图}，mounted () { this.ready() }，methods : { LoadMap : function(){ console。日志(这个.$route.params.name) console.log(这$route.params.addr) console.log(这$路线。参数。phone)//setTimeout(这个。ready，0) }，ready : function(){ var map=new BMap .地图(“所有地图”)地图。enablescrolheelzoom(true)控制台。日志(地图)var本地搜索=新BMap .LocalSearch(地图)//本地搜索。enableautoviewport()//允许自动调节窗体大小map.clearOverlays() //清空原来的标注本地搜索。setsearchecompletecallback(函数(搜索结果){ var poi=搜索结果。getpoi(0)地图。居中和缩放(poi。点，20)变化点=新的BMap .点(poi.point.lng，poi。重点。lat)var标记=新BMap .标记（点)//创建标注，为要查询的地方对应的经纬度map.addOverlay(标记)}) localSearch.search(这$路线。参数。addr)} } }/脚本样式/*去掉地图左下角的百度LOGO */.锚点bl { display : none }/样式如果直接在实例生命周期的创造中调用this.ready()方法将无法加载地图，我在index.html中加入了一个编号为全图的div，当我调用该组件时，该组件上的差异没有显示地图，而index.html中编号为全图的差异里却显示了地图，经过测试我猜测是因为该组件还没有初始化完毕，导致新的BMap .地图('全图)时实例化地图对象失败。所以应该在实例生命周期的安装好的中调用this.ready()方法。

实例生命周期参见：https://cn。vuejs。组织/v2/指南/实例。超文本标记语言

(4) 在父组件中使用a)引入从""导入BMapComponent ./components/BMapComponent。vue ' b)在模板中增加标签

B-地图组件/B-地图组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。