1、安装Vue Baidu Map
npm install vue-baidu-map --save
2、在main.js引入
import BaiduMap from 'vue-baidu-map'
// 百度地图
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥
ak: 'xx'
})
3、vue文件的具体代码
<template>
<div class="MapTest">
<BMap
:center="center"
class="map"
:scroll-wheel-zoom="true"
:zoom="zoom"
@ready="bMapLoad"
/>
</div>
</template>
<script>
import BMap from "vue-baidu-map/components/map/Map";
let mapConstructor; // 百度地图构造函数存放容器
export default {
name: "MapTest",
components: {
BMap,
},
data() {
return {
// mapPoint,
center: {
// lng: 116.404,
// lat: 39.915,
},
pointsList: [],
zoom: 20,
map: null, // 地图容器
BMap: null, // 构造器容器
};
},
mounted() {
},
methods: {
// BMap加载触发实例化方法
async bMapLoad({ BMap, map }) {
// 根据接口获取的数据(取第一个)
// list 模拟参数
const list = [
{lng:xxxx,lat:xxxx},
{lng:xxxx,lat:xxxx},
]
this.center = {
lng: this.list[0].lng,
lat: this.list[0].lat,
};
this.pointsList = this.list.map((v) => {
v.longitude = v.lng;
v.latitude = v.lat;
return v;
});
// 百度地图容器全局化
this.map = map;
// 百度地图构造函数全局化
mapConstructor = BMap;
this.BMap = BMap;
this.bMapPoint();
},
// 在百度地图上打点方法
async bMapPoint() {
// 清除地图上的覆盖物
this.map.clearOverlays();
// 对多个经纬度点进行标注
this.pointsList.forEach((element) => {
const mPoint = new mapConstructor.Point(
element.longitude * 1,
element.latitude * 1
);
var marker = new mapConstructor.Marker(mPoint, {
enableDragging: true,
});
// 在地图上添加点标记
this.map.addOverlay(marker);
const label = new mapConstructor.Label(
element.user_name,
// `(${element.longitude * 1},${element.latitude * 1})`,
{
position: {
lng: element.longitude * 1,
lat: element.latitude * 1,
}, // 文本绑定的点位位置
offset: new mapConstructor.Size(2, -16), // 文本位置移动
}
);
// 自定义文字样式
label.setStyle({
color: "black",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
border: "1px solid #000",
});
// 将标注添加到地图中
this.map.addOverlay(label);
// 窗体内容
var sContent =
"<div style='color:#333;font-size:14px;'>" +
"这里放上需要展示的信息"+
"</div>";
// 窗体样式
var sContentStyle = {
width: 250,
};
var infoWindow = new mapConstructor.InfoWindow(sContent, sContentStyle);
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
});
},
},
};
</script>
<style scoped lang="scss">
.MapTest {
padding: 20px;
}
.map {
width: 100%;
height: calc(100vh - 240px);
}
</style>