A. vue 使用百度地圖(vue-Bai-Map)
騰訊地圖暫時官方沒有在npm上放置，但是有個人的兩三年前的依賴，所以我選用網路地圖來做。
1.安裝依賴
2.main.js裡面引入並填寫你的網路地圖key
3.你需要的vue頁面引入
4.html
5.methods裡面
如果想用動態渲染地圖則核心是先把{BMap, map} 這兩個東東掛在data然後再使用,要不然報錯BMap, map undefind
B. 如何使用百度地圖API
在網路搜索引擎中搜索關鍵詞「網路地圖API」，如下圖所示。
2
訪問網路地圖API官方網站，如下圖所示。
3
本經驗案例以web開發為為例，所以選擇Javascript API。
網路地圖JavaScript API是一套由JavaScript語言編寫的應用程序介面，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。另外，2014年1月9日，極速版JavaScript API全新上線，此版本專門針對簡單功能的移動端瀏覽器開發提供。
該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）才可使用，介面（除發送簡訊功能外）無使用次數限制。
4
Javascript API有3種，這里選擇Javascript API大眾版，如下圖所示。
5
申請網路地圖密鑰，如下圖所示。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<styletype="text/css">
body,html,#allmap{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微軟雅黑";}
</style>
<scripttype="text/javascript"src="http://api.map..com/api?v=2.0&ak=您的密鑰"></script>
<title>地圖展示</title>
</head>
<body>
<divid="allmap"></div>
</body>
</html>
<scripttype="text/javascript">
//網路地圖API功能
varmap=newBMap.Map("allmap");//創建Map實例
map.centerAndZoom(newBMap.Point(116.404,39.915),11);//初始化地圖,設置中心點坐標和地圖級別
map.addControl(newBMap.MapTypeControl());//添加地圖類型控制項
map.setCurrentCity("北京");//設置地圖顯示的城市此項是必須設置的
map.enableScrollWheelZoom(true);//開啟滑鼠滾輪縮放
</script>
C. 前端百度地圖如何實現點擊添加創建點並獲取該點的信息
網路地圖api里有點擊事件，在回調函數里創建點就行了
D. 【百度地圖篇】1.Flutter+百度Sdk實現地圖功能 & 百度地圖顯示網格問題
我是初學者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯誤的，感謝指正，一起進步。
趁著假期做一個Flutter的地圖功能，因為後端選用了網路地圖，所以前端沒得挑。找了遍插件，並沒有現成可用的。（不過發現了網路官方也自開發Flutter插件，目前功能只有一個獲取本地位置信息，後期會繼續增加吧？很期待！）
參考帖子： https://blog.csdn.net/sjm19901003/article/details/53128375
這個實際上跟功能之間沒太大關系，只是我按照個人摸索的過程來寫。
當對一個「領域/知識塊」完全不懂的時候，360°的方向都不確定的話。先了解基礎概念，有利於你確定自己的摸索方向。
參考帖子： https://www.jianshu.com/p/742b15d38404
中間我跳過了幾十，上百個帖子的摸索過程。這個才是關鍵能夠真正做事的參考。
因為網路的sdk還算是很完善的，所以一旦出問題，都會有對應的報錯提示。
我是使用flutter插件：permission_handler，來解決安卓的動態授權問題，用法簡單而且設計合理。
這個錯誤直接來看，就是簽名有問題。怎麼查看SHA1碼和包名，這里不多說，網上有極其多的方法，網路Sdk開發指南里也有。沒那麼復雜，也沒那麼麻煩。按照流程操作就是對的。
實在不放心？跟我一樣，flutter打包後，把apk反過來解SHA1碼不就行了？
參考帖子： https://www.daimajiaoliu.com/daima/4858f130f900409#heading-1
紅色框框基本就是帖子講解的那樣。
藍色框框見下圖：release標簽里好像是自己設置了。所以debug標簽裡面，箭頭指向的位置，是我多設置的一個參數。
uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map..com": No address associated with hostname
這一步我是哭笑不得，一開始老是和問題（2）混淆，導致浪費很多時間。仔細閱讀後，發現是不能連接到「api.map..com」。
我打開模擬器的chrome瀏覽器，發現不能上網。查看手機的dns是10.0.2.3(默認的)，和家裡wifi不一樣，所以不能上網也正常，之前居然沒發現這個問題！！！
終端執行：adb shell 和 getprop，就可以查看所有的屬性參數了。（window小夥伴自行網路，這個沒多大差別。如果你有多個設備，記得自己選好設備。）
在裡面找到這一項，就是你的dns參數。有些人是net.dns1，我的是net.eth0.dns1。這個沒關系，只是等下指令 稍微改動 就行。
修改dns指令：setprop net.eth0.dns1 192.168.2.1
後面的192.168.2.1是我自己的dns，這個根據自己的情況來填寫。不懂的網路下怎麼查看自己的dns。
雖然提示設置失敗，但是回到模擬器一看，地圖已經顯示出來了。
嘿嘿，在flutter設定多大的區域，地圖就是多大的區域。用起來就很方便了。
過程十分痛苦，因為對flutter不是很熟悉，對Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個陌生的環境，卻要我去找一個人。所以細心很重要，一定要看清楚錯誤提示，不要錯過每一個細節和可能性。
幸好最後解決了問題，開心~
其實如果你仔細閱讀過網路官方的文檔，會發現裡面有關於 地圖的生命周期管理 。然後在這裡面沒有提及到，這一點雖然沒提，但不可或缺，小夥伴就自行思考吧。
最後還有一點，其實我的初衷是想實現一個網路地圖的plugin，但是苦於能力有限，對Android的不熟悉，最後折戟。我不得已另起項目，然後重新實現地圖sdk接入。經過這次對於這些有更多更全面的認知後，有空會再次研究flutter 插件的開發，共勉，奧利給！！！
E. 在vue3中使用百度地圖
1.點擊鏈接跳轉到網路地圖網址https://lbsyun..com/index.php?title=%E9%A6%96%E9%A1%B5
2.點擊開發文檔-Web開發-javascript API
3.進入開發文檔
4.獲取到ak後，要把網路地圖引入vue項目中了
<script src="https://api.map..com/api?v=3.0&ak=你的Ak"></script>
<script type="text/javascript" src="https://api.map..com/getscript?v=3.0&ak=你的Ak&services=&t=20210512114808"></script>
<script src="https://api.map..com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="https://api.map..com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
5.在任意.vue文件中引入地圖
6.載入網路地圖
7.創建自定義點
8.點擊點展示信息窗口
F. 百度地圖API基本使用（一）
由於最近項目有需要，所以最近開始研究網路地圖API的使用，簡單的介紹一下 網路地圖JavaScript API 它的使用，希望能夠對小夥伴們有所幫助，後續有機會再做深入的研究。
有興趣的小夥伴可以自行查找網路地圖API
網路地圖開放平台開發文檔中的JavaScript API
在使用網路地圖之前，我們需要擁有一個自己的網路賬號，申請注冊成為網路開發者，然後我們需要創建一個瀏覽器端應用，就可以獲取到一個唯一的服務秘鑰（AK）
申請秘鑰（AK）
最終html中的內容如下:
實現效果如下：可以進行移動和放大
根據id去獲取對應的元素就是我們後續網路地圖所要去填充的元素，其實創建容器的時候還有一個coordsType屬性去控制坐標的類型，不過我們不配置的話一般都是默認配置為5也就是bd0ll坐標類型， 感興趣的小夥伴可以去看一看這些坐標類型都有哪些？可以來評論區交流學習
有兩種設置中心點的方式，一種是通過上面那樣根據經緯度去設置中心點坐標，第二種就是根據城市名作為中心點
Ps：map是我們的容器不要忘了
1.初始化地圖時，進行關閉配置
2.使用地圖的方法進行配置
1.地圖初始化
添加控制項前，地圖需要進行初始化。例如，要將標准地圖控制項添加到地圖中，可在代碼中添加如下內容：
2.添加多個控制項
在本例中我們向地圖添加一個平移縮放控制項、一個比例尺控制項和一個縮略圖控制項。在地圖中添加控制項後，它們即刻生效。
初始化控制項時，可提供一個可選參數，其中的anchor和offset屬性共同控制控制項在地圖上的位置。 anchor表示控制項的停靠位置，即控制項停靠在地圖的哪個角。當地圖尺寸發生變化時，控制項會根據停靠位置的不同來調整自己的位置。
個性化地圖樣式編輯器
通過樣式ID調用個性化地圖樣式（推薦）
1.創建個性化地圖樣式
進入地圖開放平台控制台頁面，在我的地圖中，創建一個地圖樣式：
2.編輯樣式
點擊創建的地圖樣式，進入樣式編輯器，根據您的需求自由編輯地圖樣式：
3.發布樣式並獲取樣式ID
完成編輯後，在我的地圖或者編輯器中發布該地圖樣式，獲取發布後生成的樣式ID：
4.在JavaScript API中應用地圖樣式
將第三步中獲取的樣式ID作為setMapStyleV2方法的參數。
相關代碼如下：
注意：
1.使用個性化地圖前，請參考Hello World構建基礎地圖；
2.setMapStyleV2方法需要在地圖初始化（centerAndZoom）完成後執行；
3.樣式更新不會改變樣式ID。因此如果有更新樣式的需求，重新編輯發布就可以完成更新。不需要修改JavaScript API調用代碼；
4.如果樣式ID在控制台中被刪除，但JavaScript API還在繼續調用。那麼將會渲染默認樣式的地圖；
通過樣式JSON調用個性化地圖樣式
1.獲取樣式JSON
前序流程和樣式ID調用地圖樣式流程一致，進入我的地圖，創建一個地圖樣式，進入編輯器編輯完成後，直接通過編輯器中的「下載JSON」功能獲取JSON代碼：
2.在JavaScript API中應用地圖樣式
將上一步中獲取的樣式JSON作為setMapStyleV2方法的參數。
相關代碼如下：
設置後地圖效果如下:
上面這些都是一些簡單的使用，後續我在使用的過程中遇到的一些問題以及解決過程，新的API的使用會持續更新分享，網路地圖的API開發文檔給的還是很全面的，不過就是目前他提供的都是一些在線開發，對於一些內網的公司就不太友好了，所以後續這塊我需要去做一下離線開發的研究，等我把離線地圖開發弄好之後，再給大家分享。
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊和關注。
G. 百度地圖API 如何使用
1）下載網路地圖移動版API(Android)開發包
要在Android應用中使用網路地圖API，就需要在工程中引用網路地圖API開發包，這個開發包包含兩個文件：mapapi.jar和libBMapApiEngine.so。
2）申請API Key和使用Google map api一樣，在使用網路地圖API之前也需要獲取相應的API Key。網路地圖API Key與你的網路賬戶相關聯，因此您必須先有網路帳戶，才能獲得API
Key；並且，該Key與您引用API的程序名稱有關。
網路API Key的申請要比Google的簡單多了，其實只要你有網路帳號，應該不超過30秒就能完成API Key的申請。
3）創建一個Android工程
這里需要強調一點：網路地圖移動版api支持Android 1.5及以上系統，因此我們創建的工程應基於Android SDK 1.5及以上。工程創建完成後，將mapapi.jar和libBMapApiEngine.so分別拷貝到工程的根目錄及libs/armeabi目錄下，並在工程屬性->Java Build Path->Libraries中選擇「Add JARs」，選定mapapi.jar，這樣就可以在應用中使用網路地圖API了。工程完整的目錄結構如下圖所示：
H. 前端框架Vue——百度地圖使用
網路地圖的使用需要一個專屬的密鑰（ak）作為路徑：
按步驟完成，並且激活就能獲得一個密鑰了，這樣我們就可以開始引入地圖了。先來看效果圖：
現在在 index.html 中引入script:
I. uniapp(安卓端)百度地圖的使用
公司項目中有地圖展示和定位功能，使用uniapp本以為應該很是容易，應該有現成的空間，去插件市場一找，大部分的插件都是針對H5的，對於app端很少，要不就是需要花錢，這才自己動手實現。
公司過去的項目使用的是網路地圖，所以uniapp也就只能使用網路地圖了，但是一看官方文檔：就是沒有網路地圖。
在網上搜了一堆，需要使用使用到自定義基座，才能使用，那就只能通過自定義基座看看效果。
1.首先去 網路地圖開發者平台申請
這里主要是對安卓端進行操作（這里的包名和下邊創建基座的包名一致）
2.申請後再Hbuilder中manifest.json 中配置
3.製作基座
切記：Android包名一定要和網路地圖開發平台中的一致
一、定位
1.創建獲取定位的類fun.js
2.主類main.js中引入
3.需要的類中使用
輸出結果：
二、地圖展示
一開始的時候，我總是試圖尋找網路地圖是不是對uniapp這個平台有單獨的API，但是很可惜沒有。在網路地圖引入後，直接調用uniapp給的map組件，可以展示出地圖，但是很多的屬性不支持，也找不到相關的處理文檔。沒辦法，上網查找，大部分的處理方案是通過動態引入網路地圖JavaScript API GL框架，進行展示。
這個地方，我們需要在網路地圖開發者平台申請web前端的開發的key
1.網路地圖開發者控制平台，創建web端應用
2.創建動態引入網路地圖的script類map.js
3.使用（這里使用到了renderjs），切記如果需要開文檔，查看JavaScript API GL相關文檔
4.運行效果
這樣地圖的定位和地圖展示基本就完成了，如果需要更加復雜的功能只能去查看網路的官方文檔
J. 百度地圖API基本使用（三）
PS：我所使用的的是網路地圖Javascript API 3.0
本文是對之前使用的延續，繼續對網路地圖API的一些使用去做歸納和總結，本次主要是對地圖上的事件以及路線規劃做下一下介紹，如果有小夥伴沒有看過之前的網路地圖API基本使用（一），網路地圖API基本使用（二），可以先去觀看一下，前期所需要的一些准備，以及一些基本的用法。
感興趣的小夥伴可以自行查看網路地圖官方提供的文檔
網路地圖開放平台開發文檔中的JavaScript API
也可以通過下方示例中心更直觀地看到網路地圖API的一些使用，以及它的一些特性
網路地圖開放平台-示例中心
想深入研究網路地圖avaScript API 3.0方法參數信息的話，可以通過下方類參考
網路地圖avaScript API v3.0類參考
另外不同版本的API可以自行在開發文檔中的類參考類目中找到,請自行查找
不過要注意：實例中心使用的是BMap去創建容器的，最新版GL地圖命名空間為BMapGL, 可按住滑鼠右鍵控制地圖旋轉、修改傾斜角度。
BMapGL在引入API的方式如下：
BMap在引入API的方式如下：
按照你自己的需求去引用
好的，廢話不多說，開整
1.地圖載入完成事件 這個事件顧名思義就是在地圖載入完成之後會調用這個事件，我們可以去做一些操作。
實現的效果就是在地圖載入完成之後，會彈出地圖載入完成的提示！實際應用的時候可以能就會涉及到一些基於地圖的初始化操作。具體情況具體分析，就不做過多贅述了。
2.地圖單擊事件 這個事件顧名思義就是在當我們滑鼠點擊地圖上的時候，就會觸發這個事件。
我們實現的這個就是單擊地圖的時候就會觸發，可以獲取到這個點的經緯度等信息。以及我們之前有介紹的覆蓋物的一些觸發事件，基本上都是使用的是這個單擊事件，使用addEventListener監聽click去實現的，這個方法還有監聽別的事件，就不一一舉例了，給大家看一下有哪些事件可以監聽，這些都是從官方提供的類參考中找到的。
3.注銷事件 這個注銷方法也比較簡單，上一個點擊事件我們使用的是addEventListener監聽click去實現的，這個注銷實際上就是移除這個事件，類似於之前的刪除覆蓋類都是使用的remove這個欄位，對應的就是removeEventListener監聽click去刪除這個點擊事件實現的。
如果想研究比較詳細的地圖事件的小夥伴可以自行查看研究
事件-地圖事件
1.覆蓋物滑鼠事件 這個覆蓋物滑鼠事件實質就是地圖的點擊事件，只不過對象換成了覆蓋物對象，本質都是使用addEventListener去監聽事件的發生。
創建一個點和一個面覆蓋物，然後去給這兩個覆蓋物添加滑鼠點擊事件
如果想研究比較詳細的覆蓋物事件的小夥伴可以自行查看研究
事件-覆蓋物事件
首先說明一下這個路線規劃分為4種，分別是駕車路線規劃，公交路線規劃，步行路線規劃，以及騎行路線規劃，使用的類是不一樣的，我們一起來看一看。
1.基礎駕車路線規劃服務示例：
代碼如下：
2.數據介面
駕車導航服務也提供了豐富的數據介面，通過onSearchComplete回調函數可以得到BMap.DrivingRouteResult對象，它包含了駕車導航結果數據信息。 結果會包含若干駕車方案，每條方案中包含了若干駕車線路。 每條駕車線路又會包含一系列的關鍵步驟（BMap.Step），關鍵步驟描述了具體駕車行駛方案。
BMap.TransitRoute類提供公交線路規劃服務。
注意：v3.0中，新增了TransitRoutePlan.getTotal 和 TransitRoutePlan.getTotalType方法，可以獲取一條公交換乘方案中總路段數（步行+公交），和指定路段的交通方式類型（步行或公交）。
1.使用服務示例
代碼如下：
2.進行跨城路線規劃
代碼如下：
BMap.WalkingRoute提供步行線路規劃服務。基本用法和駕車線路規劃類似。
使用服務示例
代碼如下：
BMap.RidingRoute提供騎行線路規劃服務，基本用法和步行線路規劃基本相同。
使用服務示例
代碼如下：
感興趣的小夥伴可以自行去研究
網路地圖Javascript API 3.0 出行路線規劃 網路地圖JS API示例 路線規劃
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊和關注。