效果图:
1.下载插件 vue-bmap-gl
2.在main.js中引入
//地图
import VueBMap from "vue-bmap-gl";
import "vue-bmap-gl/dist/style.css";
Vue.use(VueBMap);
VueBMap.initBMapApiLoader({
ak: "6p5MmRood0q6FYqDDF9FQhXOM3obsUn7",
v: "1.0",
});
3.在组件中使用
<template>
<div style="{width: 100%;height: 600px;}">
<div id="container" ></div>
<div>
<h2>联系方式</h2>
<P>地址</P>
<p>上海松江区G60科创云廊</p>
<p>邮箱</p>
<p>catman@thinkcmf.com</p>
<p>电话</p>
<p>021 1000 0001</p>
</div>
</div>
</template>
<script>
import { lazyBMapApiLoaderInstance } from "vue-bmap-gl";
export default {
name: "contact",
mounted() {
this.init();
},
methods: {
init() {
var map = new BMapGL.Map("container"); // 创建Map实例
// map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
// map.centerAndZoom('上海市松江区G60科创园区', 12); // 初始化地图,设置中心点坐标和地图级别
var point = new BMapGL.Point(121.327853, 31.091195); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
var infoWindow = new BMapGL.InfoWindow(
"ThinkCMF\n地址:上海市松江区G60科创园区"
); // 创建信息窗口对象
marker.openInfoWindow(infoWindow, point);
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
},
},
};
</script>
<style lang="less" scoped>
#container {
overflow: hidden;
width: 100%;
height: 480px;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: 0.75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: 0.25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
可用看这篇教程: