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':'...
·
方法一:
直接引用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'
})
使用方式同上。
等待发版的时间编辑一下这个文章作为自己的备注,方便以后查找使用。
更多推荐
已为社区贡献21条内容
所有评论(0)