第一步
登陆百度地图开放平台,申请密钥
第二步
安装,操作手册点这里--->操作手册
npm install vue-baidu-map-3x --save
第三步
在index.html中引用
<!-- 百度地图 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
第四步
基本使用
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import {
BaiduMap,
BmMapType,
BmCityList,
BmMarker,
BmGeolocation,
BmInfoWindow,
} from 'vue-baidu-map-3x'
const show = ref(false)
const address = ref<any>(undefined)
const state = reactive<any>({
lng: 116.403401,
lat: 39.924823,
})
/**
* 添加点标记
* @param e e
*/
const handelClick = (e: any) => {
show.value = false
state.lng = e.point.lng
state.lat = e.point.lat
const geocoder = new window.BMap.Geocoder()
// 解析地址
geocoder.getLocation(e.point, (res: any) => {
if (res) {
show.value = true
address.value = res.address
}
})
}
</script>
<template>
<baidu-map
class="bm-view"
:center="{ lng: 116.403401, lat: 39.924823 }"
:zoom="15"
:scroll-wheel-zoom="true"
ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn"
v="3.0"
type="API"
@click="handelClick"
>
<!-- anchor:控件所在方位 可选(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT,BMAP_ANCHOR_BOTTOM_RIGHT) 左上,右上,左下,右下-->
<!-- 分别是二维地图和卫星地图 -->
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
></bm-map-type>
<!-- 城市列表-选择城市搜索城市(支持市级以上搜索) -->
<bm-city-list
anchor="BMAP_ANCHOR_TOP_LEFT"
@changeAfter="message.success('成功切换城市')"
></bm-city-list>
<!-- 点标记 -->
<bm-marker :position="state" :dragging="true" :raiseOnDrag="true">
<bm-info-window :show="show" @close="show = false" @open="show = true">
{{ address }}
</bm-info-window>
</bm-marker>
<!-- 定位 -->
<bm-geolocation
anchor="BMAP_ANCHOR_TOP_RIGHT"
:showAddressBar="true"
:autoLocation="true"
@locationSuccess="
(e:any) =>
message.success(
'定位成功已切换到' +
e.addressComponent.province +
e.addressComponent.city,
)
"
@locationError="message.error('定位失败,请稍后再试')"
></bm-geolocation>
</baidu-map>
</template>
<style scoped>
.bm-view {
width: 100%;
height: 100%;
border: 10px solid #ececec;
}
</style>
效果图如下:
地图控件
<script setup lang="ts">
import {
BaiduMap,
BmNavigation,
BmScale,
BmOverviewMap,
BmPanorama,
} from 'vue-baidu-map-3x'
</script>
<template>
<baidu-map
class="bm-view"
:center="{ lng: 116.403185, lat: 39.92272 }"
:zoom="15"
:scroll-wheel-zoom="true"
ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn"
v="3.0"
type="API"
>
<!-- anchor:控件所在方位 可选(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT,BMAP_ANCHOR_BOTTOM_RIGHT) 左上,右上,左下,右下 -->
<!-- 缩放 -->
<bm-navigation
anchor="BMAP_ANCHOR_TOP_RIGHT"
:enableGeolocation="true"
:showZoomInfo="true"
></bm-navigation>
<!-- 比例尺 -->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!-- 缩略图 -->
<bm-overview-map
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:isOpen="true"
></bm-overview-map>
<!-- 全景控件 -->
<bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>
</baidu-map>
</template>
<style scoped>
.bm-view {
width: 100%;
height: 100%;
border: 10px solid #ececec;
}
</style>
效果图如下: