【Vue3】Vue3+Vite+TS使用npm包引入百度地图

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-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>

Vue3+Vite+TS引入高德地图

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

npm包查找地图依赖包

npm包官网