Vue3+Vite+TS引入百度地图

一、注册

官网👉百度地图开放平台

注册好的登录打开控制台

打开应用管理下的二级菜单我的应用，选择创建应用

填写名称选择自己要使用的

复制AK-》到后面可以直接放到ak上面

二、安装依赖包

// vue3
$ npm install vue-baidu-map-3x --save
// 或者
$ yarn add baidu-map-vue3// vue2
$ npm install vue2-baidu-map --save

三、参考文档

百度地图JavaScript开发文档

百度地图3方npm包

百度地图VUE3组件库 (lunnlew.github.io)

四、全局注册

import BaiduMap from 'vue-baidu-map-3x'const app = createApp(App);
app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: '百度地图ak',// v:'2.0',  // 默认使用3.0// type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});

<template><baidu-map class="bm-view" center="汕头" :zoom="15" :scroll-wheel-zoom="true"><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"></bm-geolocation><bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list></baidu-map>
</template><script setup lang="ts">
import { ref } from "vue";const mapStyle = ref({styleJson: [{featureType: "all",elementType: "geometry",stylers: {hue: "#007fff",saturation: 89,},},{featureType: "water",elementType: "all",stylers: {color: "#ffffff",},},],
});
</script>
<style scoped>
.bm-view {width: 100%;height: 80%;
}
</style>

五、局部导入

<template><baidu-mapclass="map"ref="map":apiKey="apiKey":center="point"></baidu-map>
</template><script setup lang="ts">
import { BaiduMap } from 'baidu-map-vue3'
const point = ref({lng: 116.403963,lat: 39.915119,
})
</script>
<style lang="less">
.map {width: 100%;height: 400px;
}
</style>

六、断网地图的使用

import BaiduMapOffline from 'vue-baidu-map-offline';
import BaiduMap from 'vue-baidu-map-3x'app.use(BaiduMapOffline, {offline: true
});
app.use(BaiduMap, {ak: '百度地图ak',v: '3.0',// type: 'WebGL'
});

八、项目使用成功图片

九、使用卫星图

<template><baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" mapType="BMAP_SATELLITE_MAP"></baidu-map>
</template>

Vue3+Vite+TS引入高德地图

npm i @amap/amap-jsapi-loader --save

npm包查找地图依赖包

npm包官网