官网百度地图开放平台
注册好的登录打开控制台
打开应用管理
下的二级菜单我的应用
,选择创建应用
填写名称选择自己要使用的
复制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-geolocation
anchor="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-map
class="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>
npm i @amap/amap-jsapi-loader --save
npm包官网