vue里使用百度地图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近公司项目里要用到百度地图，然后查阅了一些资料，并总结了下；

首先呢，由于本公司使用的是百度离线地图，那么我们首先需要将百度地图离线包放置static静态文件目录下（我的离线地图包名是“baidu_new_t”），然后在首页入口文件index.html里head标签里引入百度地图需要的js；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mo</title>
//在线
<script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script>
</head>
<body>
<div id="app"></div>

</body>
<script type="text/javascript"> document.body.onmousedown = function(){
return false;
}
</script>
</html>
然后在项目里新建一个百度地图组件：地图对象生成方法写在组件mounted方法里面，在需要的地方导入此组件即可使用；
<template>
<div id="allmap"></div>
</template>
<script>
//import BMap from 'BMap'
export default {
data(){
return { }
},
mounted(){
console.log(123123)
if(BMap){
var map =new BMap.Map("allmap");
var point =new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();//启用滚轮放大缩小
var marker =new BMap.Marker(point);
map.addOverlay(marker);
}
}
}
</script>
<style>
#allmap {
width: 200px;
height: 200px;
}
</style>
注意点
1. 本人使用的是离线地图，如果想要使用在线地图，再第一步骤里引入在线js即可；
2. 如果使用vue-cli 3.x版本，需要将百度地图离线包放在public文件夹下；
3. 需要将script标签写在body标签之前，否则mounted事件里面会存在找不到bmap