vue集成 百度地图

百度篇：

和高德一样先创建百度地图开放平台账号然后在控制台中点击应用管理

然后点击创建应用因为是在pc端选择浏览器端就可以

然后就得到了ak值

千万记得这个ip如果是公司或者项目请写ip地址为公司，要是自己用就先写本地localhost

然后就可以获取ak值

然后就是代码环节

先下载依赖

npm install vue-baidu-map

在main.js中全局注册

Vue.config.productionTip = false;
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '这里是上面申请的ak值'
})

然后新建vue页面输入以下代码都有注解：

<template>
    <div class="dynamic">
		<div>
			<h3>
				<span>地图信息</span>
				<i title="地图" class="el-icon-map-location" @click="amplification"></i>
			</h3>
      <!-- 在script标签中，定义了组件的data属性，包含了markerPoint、show、isBig、values和position等属性。
      其中，markerPoint表示地图标记点的经纬度坐标，show表示标记点信息窗口是否显示，isBig表示地图是否放大，values和position表示地图标记点的经纬度坐标
      在methods中，定义了handler方法，用于在地图加载完成后设置地图的中心点和缩放级别 -->
			<baidu-map class="bm-view" :center="markerPoint" :zoom="16" :dragging="true" :scroll-wheel-zoom="true" @ready="handler">  
				<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT" style="width:1000px; height:500px;"></bm-map-type>
				<bm-marker :position="position" :dragging="false" animation="BMAP_ANIMATION_BOUNCE" style="width:1000px; height:500px;">
					<bm-info-window :show="show" style="font-size:13px"></bm-info-window>
          <!-- 用来设置信息窗口的字体大小 -->
				</bm-marker> 
			</baidu-map>
    </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
          //地方经纬度
			markerPoint:{lng: 112.570605, lat:37.893955},
			show:false,
			isBig:false,
			values:[],
      //小红点动画经纬度
			position:{lng: 112.570605, lat:37.893955}
        }
    },
	methods:{
	handler ({BMap, map}) {
		  // console.log(BMap, map)
			  this.center.lng = 108.951;
			  this.center.lat = 34.3285;
			  this.zoom=15;
		},
	}
}
</script>

<style scoped>
.dynamic{
	display: flex;
	position: relative;
}
.map{
	width: 50%;
	height: 330px;
	transition: 0.5s;
	margin: 0 auto;
}
.mapBig{
	position: absolute;
	width: 100%;
	height:536px;
	z-index: 3;
	transition: 0.5s;
	top: -218px;
}
.information{
	width: 30%;
}
/* 地图 */
.bm-view {
  width: 100%;
  height: 89%;
}
h3 {
    font-size: 14px;
    line-height: 35px;
    padding: 0 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
	border-left: 0;
}
.map h3,.mapBig h3,.information h3{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.map h3 i,.mapBig h3 i{
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
}
.information h3 img{
	display: block;
	width: 25px;
	transform: rotateY(180deg);
}
</style>

记得引用

import BaiduMap from "vue-baidu-map";

上面都有注解有不懂的可以参考注解，到这里百度地图就可以上页面了。