Vue3使用vue-baidu-map-3x百度地圖

安裝vue-baidu-map-3x:

????????

// vue3
$ npm install vue-baidu-map-3x --save// vue2
$ npm install vue2-baidu-map --save

全局注冊/局部注冊:

? ? ? ?

import { createApp } from 'vue'
import App from './App.vue'
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)
});
app.mount('#app');
<template><baidu-map class="bm-view" :zoom="12" :center="{lng: 116.404, lat: 39.915}" ></baidu-map>
</template><style>
.bm-view {width: 100%;height: 300px;
}
</style>

?局部注冊:

????????

<template><baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15"></baidu-map>
</template><script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script><style>
.map {width: 100%;height: 300px;
}
</style>

自定義覆蓋物:

????????

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/210574.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/210574.shtml
英文地址,請注明出處:http://en.pswp.cn/news/210574.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

綜述 2017-Genome Biology:Alignment-free sequence comparison

Zielezinski, Andrzej, et al. "Alignment-free sequence comparison: benefits, applications, and tools." Genome biology 18 (2017): 1-17. https://genomebiology.biomedcentral.com/articles/10.1186/s13059-017-1319-7 被引次數&#xff1a;476應用問題&…

curl 18 HTTP/2 stream

cd /Users/haijunyan/Desktop/CustomKit/KeepThreadAlive/KeepThreadAlive //Podfile所在文件夾 git config --global https.postBuffer 10485760000 git config --global http.postBuffer 10485760000 pod install https://blog.csdn.net/weixin_41872403/article/details/86…

linux命令積累

1.查找指定目錄下第二層目錄&#xff0c;一年前的文件 find $dir -maxdepth 1 -type d -mtime 365 2./data/att/dir1軟連接到/data1/att/dir1 硬連接和軟連接的區別 硬連接 ln file1 file2 1.硬連接不能對目錄進行鏈接。 2.硬連接修改一個文件&#xff08;不論修改哪方文件&…

top K問題(借你五分鐘)

目錄 前言 top K問題 模擬數據 建堆 驗證&#xff08;簡單了解即可&#xff09; 最終代碼 調試部分 前言 在大小堆的實現&#xff08;C語言&#xff09;中我們討論了堆的實際意義&#xff0c;在看了就會的堆排序&#xff08;C語言&#xff09;中我們完成了堆排序&#…

銀河麒麟本地軟件源配置方法

軟件源介紹 軟件源可以理解為軟件倉庫&#xff0c;當需要安裝軟件時則會根據源配置去相應的軟件源下載軟件包&#xff0c;此方法的優點是可以自動解決軟件包的依賴關系。常見的軟件源有光盤源、硬盤源、FTP源、HTTP源&#xff0c;本文檔主要介紹本地軟件源的配置方法&#xff…

功能強大的屏幕錄制和剪輯工具Camtasia Studio 2024 中文版

Camtasia Studio 2024 是一款功能強大的屏幕錄像工具&#xff0c;集視頻錄制、剪輯、編輯和播放于一體的多功能屏幕錄制軟件&#xff0c;Camtasia Studio 2024操作簡單&#xff0c;它能夠輕松為您將屏幕上的所有聲音、影音、鼠標移動的軌跡和麥克風聲音全部錄制下來&#xff0c…

分布式架構原理與實踐讀書筆記

分布式架構原理與實踐讀書筆記 IT 軟件架構的更迭&#xff1a;從單體架構&#xff0c;到集群架構&#xff0c;到現在的分布式和微服務架構。 分布式架構具有分布性、自治性、并行性、全局性等特點。 為了應對請求的高并發和業務的復雜性&#xff0c;需要對應用服務進行合理拆…

springboot(ssm暢游游戲銷售平臺 游戲電商系統Java系統

springboot(ssm暢游游戲銷售平臺 游戲電商系統Java系統 開發語言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服務器&#xff1a;tomcat 數據庫&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 數…

使用Jmeter做性能測試的注意點

一、性能測試注意點 1. 用jmeter測試時使用BeanShell腳本獲取隨機參數值&#xff0c;會導致請求時間過長&#xff0c;TPS過低。應改為使用csv讀取參數值&#xff0c;記錄的TPS會更加準確。 注&#xff1a;進行性能測試時&#xff0c;應注意會影響請求時間的操作&#xff0c;盡量…

[JVM 基礎 - Java 類加載機制]

這篇文章將帶你深入理解Java 類加載機制。 JVM 基礎 - Java 類加載機制 類的生命周期 類的加載: 查找并加載類的二進制數據連接 驗證: 確保被加載的類的正確性準備: 為類的靜態變量分配內存&#xff0c;并將其初始化為默認值解析: 把類中的符號引用轉換為直接引用初始化使用卸…

1-4、JDK目錄結構

語雀原文鏈接 文章目錄 1、目錄結構2、JDK中rt.jar、tools.jar和dt.jar作用3、bin目錄部分說明&#xff08;基本工具&#xff09; 1、目錄結構 bin目錄&#xff1a;包含一些用于開發Java程序的工具&#xff0c;例如&#xff1a;編譯工具(javac.exe)、運行工具 (java.exe) 、打…

菜鳥學習日記(python)——循環語句

python中的循環語句包括for循環語句和while循環語句&#xff0c;但是python中是沒有do...while循環語句的。 while循環語句 while循環語句的一般格式為; while condition:loop body condition是循環判斷條件&#xff0c;loop body是循環體。 當循環條件成立時&#xff0c;…

基于ssm的彩妝小樣售賣商城的設計與實現論文

摘 要 隨著科學技術的飛速發展&#xff0c;各行各業都在努力與現代先進技術接軌&#xff0c;通過科技手段提高自身的優勢&#xff1b;對于彩妝小樣售賣商城當然也不能排除在外&#xff0c;隨著網絡技術的不斷成熟&#xff0c;帶動了彩妝小樣售賣商城&#xff0c;它徹底改變了過…

RUST博客帖子編輯示例

狀態模式&#xff08;state pattern&#xff09;是一種面向對象的設計&#xff0c;它的關鍵點在于&#xff1a;一個值擁有的內部狀態由數個狀態對象&#xff08;state object&#xff09;表的而成&#xff0c;而值的行為則隨著內部狀態的改變而改變。 下面的示例用來實現發布博…

Leetcode—231.2的冪【簡單】

2023每日刷題&#xff08;五十四&#xff09; Leetcode—231.2的冪 實現代碼 class Solution { public:bool isPowerOfTwo(int n) {if(n < 0) {return false;}long long ans 1;while(ans < n) {ans * 2;}if(ans n) {return true;}return false;} };運行結果 之后我會…

時間序列預測專欄介紹 — 算法原理、源碼解析、項目實戰

專欄鏈接&#xff1a;https://blog.csdn.net/qq_41921826/category_12495091.html 專欄內容 所有文章提供源代碼、數據集、效果可視化 文章多次上熱搜榜單 時間序列預測存在的問題 現有的大量方法沒有真正的預測未來值&#xff0c;只是用歷史數據做驗證 利用時間序列分解算法存…

【Vue第3章】使用Vue腳手架_Vue2

目錄 3.1 初始化腳手架 3.1.1 說明 3.1.2 具體步驟 3.1.3 模板項目的結構 3.1.4 筆記與代碼 3.1.4.1 筆記 3.1.4.2 01_src_分析腳手架 3.2 ref與props 3.2.1 ref 3.2.2 props 3.2.3 筆記與代碼 3.2.3.1 筆記 3.2.3.2 02_src_ref屬性 3.2.3.3 03_src_props配置 3…

根據應聘者的姓名和所學專業判斷是否需要這樣的程序設計人員

一、程序分析 導入Scanner函數&#xff0c;分別輸入應聘者的姓名和應聘者所學的程序設計語言。 二、具體代碼 import java.util.Scanner; public class Recruitment {public static void main(String[] args){try (Scanner scan new Scanner(System.in)) {System.out.prin…

Spring Boot 3 整合 Mybatis-Plus 實現動態數據源切換實戰

&#x1f680; 作者主頁&#xff1a; 有來技術 &#x1f525; 開源項目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 倉庫主頁&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 歡迎點贊…

1-5、JDK API文檔

語雀原文鏈接 文章目錄 jdk1.8中文.CHM JDK8中文在線文檔&#xff1a;https://www.matools.com/api/java8Java11中文在線文檔&#xff1a;https://www.matools.com/api/java11