vue 使用百度地图api

安装百度map组件

npm install vue-baidu-map --save

代码如下

<template>
	<div class="circleIcon">
		<baidu-map
			class="container"
		    :center="center"
		    :zoom="zoom"
		    @ready="handler"
		/>
	</div>
</template>
<script>
export default{
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 0,
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
  },
}
</script>
<style scoped lang="scss">
.circleIcon {
	width: 510px;
	height: 510px;
	position: absolute;
	top: 40px;
	right: 0;
	left: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: url("../../assets/circle_icon.png") no-repeat 0 0 / 100% 100%;
	border-radius: 50%;
	overflow: hidden;
	.container {
		width: 100%;
		height: 100%;
		background: #32e9f9;
	}
}
.map {
  width: 500px;
  height: 500px;
}
</style>

效果如下