vue中使用百度地图的两种实现方法

方法一:
直接引用js。
1.在index.html中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

2.添加配置
在webpack.base.conf.js文件中添加如下配置:

externals:{
    'BMap':'BMap'
},

位置放在webpack.base.conf.js文件中 entry: {}下面就可以了。
如图:
在这里插入图片描述
其实到这里就可以结束了,下面是一些更为详细的说明,其实可以忽略的。

有的说需要在webpack.dev.conf.js这个文件内也要添加配置,但是我本地测试这个可以不添加的,但是添加上也不报错。
如添加位置为:
devWebpackConfig内,和module、devtool、devServer平级即可,如图:
在这里插入图片描述
结束,这样就可以直接在页面内使用了。

使用页面的代码如下:

<template>
    <div class="signMap-wrap">
        <section class="content">
            <div id="allmap"></div>
	        <p>返回北京市“景点”关键字的检索结果,并展示在地图上</p>
        </section>
    </div>
</template>
<script>
export default {
    name: 'signMap',
    data() {
        return {
        
        }
    },
    mounted() {
        // 百度地图API功能
        var map = new BMap.Map("allmap");        
        console.log(map)  
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search("景点");
    },
    methods: {
    
    }
}
</script>
<style lang="scss" scoped>
@import "../../styles/mixin";
.signMap-wrap {
    #allmap{
        width: 100%;
        height: 100%;
    }
}
</style>

有些文章中说需要引入,才可以使用,我这边如果引入的话是会直接报如下错误的:
在这里插入图片描述
(注:该方法使用强行引入多页应用的开发方式,有些破坏整个项目的框架,影响性能。)

方法二:安装vue-baidu-map
1.安装

npm install vue-baidu-map --save

2.在main.js中引入并注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  	ak: 'http://api.map.baidu.com/api?v=2.0&ak=自己注册的ak'
})

使用方式同上。

等待发版的时间编辑一下这个文章作为自己的备注,方便以后查找使用。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页