(1)在index.html文件中引入百度地图
<script type="text/javascript" src="/UploadFiles/2021-04-02/api">(2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;
externals: { "BMap": "BMap" },(3)添加地图组件BMapComponent.vue,这里主要注意两点:
a)使用BMap的时候需要import (经过本人测试,如果不用import会提示BMap未定义)
b)注意一定要给bmap的div设置高度,否则会看不见
该组件的代码如下
<!-- 页面模版 --> <template> <div> <!--header--> <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header> <!--header end--> <!--container--> <div id="allmap" style=" width: 100%; height:200px; border: 1px solid gray; overflow:hidden;"> </div> <!--container end--> </div> </template> <script> import comHeader from 'components/comHeader' import BMap from 'BMap' export default { components: { comHeader }, data: () => ({ headerData: { title: '网点详情', toLink: '/SalesOutlets' } }), created () { // 组件创建完后获取数据,这里和1.0不一样,改成了这个样子 this.loadMap() // this.ready() // 如果在此处直接调用this.ready()方法,将无法加载地图 }, mounted () { this.ready() }, methods: { loadMap: function () { console.log(this.$route.params.name) console.log(this.$route.params.addr) console.log(this.$route.params.phone) // setTimeout(this.ready, 0) }, ready: function () { var map = new BMap.Map('allmap') map.enableScrollWheelZoom(true) console.log(map) var localSearch = new BMap.LocalSearch(map) // 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(point) // 创建标注,为要查询的地方对应的经纬度 map.addOverlay(marker) }) localSearch.search(this.$route.params.addr) } } } </script> <style> /* 去掉地图左下角的百度LOGO */ .anchorBL { display:none } </style>如果直接在实例生命周期的created中调用this.ready()方法将无法加载地图,我在index.html中加入了一个id为allmap的div,当我调用该组件时,该组件上的div没有显示地图,而index.html中id为allmap的div里却显示了地图,经过测试我猜测是因为该组件还没有初始化完毕,导致new BMap.Map('allmap')时实例化地图对象失败。所以应该在实例生命周期的mounted中调用this.ready()方法。
实例生命周期参见:https://cn.vuejs.org/v2/guide/instance.html
(4) 在父组件中使用
a)引入 import BMapComponent from './components/BMapComponent.vue'
b)在template中增加标签<b-map-component></b-map-component>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]