这篇文章给大家分享的是有关怎样将百度地图包装成Vue的组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
(1)在指数。html文件中引入百度地图
:外部,{
“BMap"才能:,“BMap",
},
& lt; !——,页面模版,——比;
& lt; template>
,& lt; div>
& lt;才能!——头比;
& lt;才能com-header : title=癶eaderData.title",:可能性=癶eaderData.toLink"祝辞& lt;/com-header>
& lt; !——header 才能结束——比;
,
& lt;才能!——容器比;
& lt;才能div id=癮llmap",
,,,,,风格=?
,,,,,,,宽度:,100%,,
,,,,,,,身高:200 px,,
,,,,,,,边界:,1 px solid 灰色;
,,,,,,,溢出:隐藏;“比;
,,,& lt;/div>
& lt; !——container 才能结束——比;
,& lt;/div>
& lt;/template>
& lt; script>
import comHeader 得到& # 39;组件/comHeader& # 39;
import BMap 得到& # 39;BMap& # 39;
export default {
,组件:{
comHeader才能
},
数据:大敌;(),=祝辞,({
,,headerData: {
,,,标题:& # 39;网点详情& # 39;,
,,,的可能性:& # 39;/SalesOutlets& # 39;
,,}
}),
,created (), {//,才能组件创建完后获取数据,这里和1.0不一样,改成了这个样子
this.loadMap才能()//才能,this.ready(),//,如果在此处直接调用this.ready()方法,将无法加载地图
},
,mounted (), {
this.ready才能()
},
,方法:{
,,loadMap: function (), {
,,console.log(这一点。route.params.name美元)
,,console.log(这一点。route.params.addr美元)
,,console.log(这一点。route.params.phone美元)
,,//,setTimeout (this.ready, 0)
,,},
准备好了才能:function (), {
,,var map =, new BMap.Map (& # 39; allmap& # 39;)
,,map.enableScrollWheelZoom(真正的)
,,console.log(地图)
,
,,var localSearch =, new BMap.LocalSearch(地图)
,,//,localSearch.enableAutoViewport(),//,允许自动调节窗体大小
,,map.clearOverlays(),//,清空原来的标注
,,localSearch.setSearchCompleteCallback (function (searchResult), {
,,,var poi =, searchResult.getPoi (0)
,,,map.centerAndZoom (poi.point, 20)
,,,var point =, new BMap.Point (poi.point.lng, poi.point.lat)
,,,var marker =, new BMap.Marker(点),//,创建标注,为要查询的地方对应的经纬度
,,,map.addOverlay(标记)
,,})
,,localSearch.search(这一点。route.params.addr美元)
,,}
,}
}
& lt;/script>
& lt; style>
,/*去掉地图左下角的百度LOGO */,.anchorBL {
,显示:没有
,}
& lt;/style>
如果直接在实例生命周期的创建中调用this.ready()方法将无法加载地图,我在index . html中加入了一个id为allmap的div,当我调用该组件时,该组件上的div没有显示地图,而索引。html中id为allmap的div里却显示了地图,经过测试我猜测是因为该组件还没有初始化完毕,导致新BMap.Map (& # 39; allmap& # 39;)时实例化地图对象失败。所以应该在实例生命周期的安装中调用this.ready()方法。
实例生命周期参见:https://cn.vuejs.org/v2/guide/instance.html
(4)在父组件中使用
,,一)引入从& # 39;进口BMapComponent。/组件/BMapComponent.vue& # 39;
,,b)在模板中增加标签
