2. 程式人生 > >vue載入百度地圖（只加載一次）

vue載入百度地圖（只加載一次）

阿新 • • 發佈：2019-01-31
const points = [ {'lng': 116.418261, 'lat': 39.921984, 'count': 50}, {'lng': 116.423332, 'lat': 39.916532, 'count': 51}, {'lng': 116.419787, 'lat': 39.930658, 'count': 15}, {'lng': 116.418455, 'lat': 39.920921, 'count': 40}, {'lng': 116.418843, 'lat': 39.915516, 'count': 100}, {'lng'
: 116.42546, 'lat': 39.918503, 'count': 6}, {'lng': 116.423289, 'lat': 39.919989, 'count': 18}, {'lng': 116.418162, 'lat': 39.915051, 'count': 80}, {'lng': 116.422039, 'lat': 39.91782, 'count': 11}, {'lng': 116.41387, 'lat': 39.917253, 'count': 7}, {'lng': 116.41773, 'lat': 39.919426
, 'count': 42}, {'lng': 116.421107, 'lat': 39.916445, 'count': 4}, {'lng': 116.417521, 'lat': 39.917943, 'count': 27}, {'lng': 116.419812, 'lat': 39.920836, 'count': 23}, {'lng': 116.420682, 'lat': 39.91463, 'count': 60}, {'lng': 116.415424, 'lat': 39.924675, 'count': 8}, {'lng': 116.419242
, 'lat': 39.914509, 'count': 15}, {'lng': 116.422766, 'lat': 39.921408, 'count': 25}, {'lng': 116.421674, 'lat': 39.924396, 'count': 21}, {'lng': 116.427268, 'lat': 39.92267, 'count': 1}, {'lng': 116.417721, 'lat': 39.920034, 'count': 51}, {'lng': 116.412456, 'lat': 39.92667, 'count': 7}, {'lng': 116.420432, 'lat': 39.919114, 'count': 11}, {'lng': 116.425013, 'lat': 39.921611, 'count': 35}, {'lng': 116.418733, 'lat': 39.931037, 'count': 22}, {'lng': 116.419336, 'lat': 39.931134, 'count': 4}, {'lng': 116.413557, 'lat': 39.923254, 'count': 5}, {'lng': 116.418367, 'lat': 39.92943, 'count': 3}, {'lng': 116.424312, 'lat': 39.919621, 'count': 100}, {'lng': 116.423874, 'lat': 39.919447, 'count': 87}, {'lng': 116.424225, 'lat': 39.923091, 'count': 32}, {'lng': 116.417801, 'lat': 39.921854, 'count': 44}, {'lng': 116.417129, 'lat': 39.928227, 'count': 21}, {'lng': 116.426426, 'lat': 39.922286, 'count': 80}, {'lng': 116.421597, 'lat': 39.91948, 'count': 32}, {'lng': 116.423895, 'lat': 39.920787, 'count': 26}, {'lng': 116.423563, 'lat': 39.921197, 'count': 17}, {'lng': 116.417982, 'lat': 39.922547, 'count': 17}, {'lng': 116.426126, 'lat': 39.921938, 'count': 25}, {'lng': 116.42326, 'lat': 39.915782, 'count': 100}, {'lng': 116.419239, 'lat': 39.916759, 'count': 39}, {'lng': 116.417185, 'lat': 39.929123, 'count': 11}, {'lng': 116.417237, 'lat': 39.927518, 'count': 9}, {'lng': 116.417784, 'lat': 39.915754, 'count': 47}, {'lng': 116.420193, 'lat': 39.917061, 'count': 52}, {'lng': 116.422735, 'lat': 39.915619, 'count': 100}, {'lng': 116.418495, 'lat': 39.915958, 'count': 46}, {'lng': 116.416292, 'lat': 39.931166, 'count': 9}, {'lng': 116.419916, 'lat': 39.924055, 'count': 8}, {'lng': 116.42189, 'lat': 39.921308, 'count': 11}, {'lng': 116.413765, 'lat': 39.929376, 'count': 3}, {'lng': 116.418232, 'lat': 39.920348, 'count': 50}, {'lng': 116.417554, 'lat': 39.930511, 'count': 15}, {'lng': 116.418568, 'lat': 39.918161, 'count': 23}, {'lng': 116.413461, 'lat': 39.926306, 'count': 3}, {'lng': 116.42232, 'lat': 39.92161, 'count': 13}, {'lng': 116.4174, 'lat': 39.928616, 'count': 6}, {'lng': 116.424679, 'lat': 39.915499, 'count': 21}, {'lng': 116.42171, 'lat': 39.915738, 'count': 29}, {'lng': 116.417836, 'lat': 39.916998, 'count': 99}, {'lng': 116.420755, 'lat': 39.928001, 'count': 10}, {'lng': 116.414077, 'lat': 39.930655, 'count': 14}, {'lng': 116.426092, 'lat': 39.922995, 'count': 16}, {'lng': 116.41535, 'lat': 39.931054, 'count': 15}, {'lng': 116.413022, 'lat': 39.921895, 'count': 13}, {'lng': 116.415551, 'lat': 39.913373, 'count': 17}, {'lng': 116.421191, 'lat': 39.926572, 'count': 1}, {'lng': 116.419612, 'lat': 39.917119, 'count': 9}, {'lng': 116.418237, 'lat': 39.921337, 'count': 54}, {'lng': 116.423776, 'lat': 39.921919, 'count': 26}, {'lng': 116.417694, 'lat': 39.92536, 'count': 17}, {'lng': 116.415377, 'lat': 39.914137, 'count': 19}, {'lng': 116.417434, 'lat': 39.914394, 'count': 43}, {'lng': 116.42588, 'lat': 39.922622, 'count': 27}, {'lng': 116.418345, 'lat': 39.919467, 'count': 8}, {'lng': 116.426883, 'lat': 39.917171, 'count': 3}, {'lng': 116.423877, 'lat': 39.916659, 'count': 34}, {'lng': 116.415712, 'lat': 39.915613, 'count': 14}, {'lng': 116.419869, 'lat': 39.931416, 'count': 12}, {'lng': 116.416956, 'lat': 39.925377, 'count': 11}, {'lng': 116.42066, 'lat': 39.925017, 'count': 38}, {'lng': 116.416244, 'lat': 39.920215, 'count': 91}, {'lng': 116.41929, 'lat': 39.915908, 'count': 54}, {'lng': 116.422116, 'lat': 39.919658, 'count': 21}, {'lng': 116.4183, 'lat': 39.925015, 'count': 15}, {'lng': 116.421969, 'lat': 39.913527, 'count': 3}, {'lng': 116.422936, 'lat': 39.921854, 'count': 24}, {'lng': 116.41905, 'lat': 39.929217, 'count': 12}, {'lng': 116.424579, 'lat': 39.914987, 'count': 57}, {'lng': 116.42076, 'lat': 39.915251, 'count': 70}, {'lng': 116.425867, 'lat': 39.918989, 'count': 8}] const ak = '你的百度地圖祕鑰' const loadBaiDuMap = function () { return new Promise(function (resolve, reject) { try { console.log('BMap is defined:', BMap !== undefined) resolve(BMap) } catch (e) { window.init = function () { resolve(BMap) let script2 = document.createElement('script') script2.type = 'text/javascript' script2.src = 'http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js' script2.onerror = reject document.body.appendChild(script2) } let script1 = document.createElement('script') script1.type = 'text/javascript' script1.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init' script1.onerror = reject document.body.appendChild(script1) } }) } export default { data () { return { bmap: {}, heatmapOverlay: {} } }, methods: { initBMap () { let vue = this loadBaiDuMap().then((BMap, BMapLib) => { vue.bmap = new BMap.Map('bmap', {enableMapClick: false}) // 建立Map例項 vue.bmap.enableScrollWheelZoom() vue.bmap.centerAndZoom('北京', 15) // 不能在此處繼續新增熱力圖,沒有找到解決辦法,如有高人還請指教一二啊 }) }, initHeatMap () { this.heatmapOverlay = new BMapLib.HeatmapOverlay({'radius': 20}) this.bmap.addOverlay(this.heatmapOverlay) this.heatmapOverlay.setDataSet({data: points, max: 100}) } }, mounted () { this.initBMap() } }

相關推薦

vue載入百度地圖（只加載一次）

const points = [ {'lng': 116.418261, 'lat': 39.921984, 'count': 50}, {'lng': 116.423332, 'lat': 39.916532, 'count': 51}, {'lng': 116.419787,

ios 整合百度地圖（獲取定位,反向地理編碼）

原因 ：之所以使用百度地圖，是因為當時使用蘋果自帶的定位給後臺傳經緯度，後臺用百度解析誤差比較大，所以換成了百度地圖 本文主要講解下cocoapods 整合 看詳細整合請點選(cocoapod整合連結) 1 、首先去百度地圖開放平臺註冊賬戶 點選立即使用 然後註冊 2、然後進行郵箱啟用

記錄Vue非同步載入百度地圖

網上搜了不少資料都是index.html直接加script，個人是不喜歡這種方式，畢竟有時候只有一個頁面需要到百度地圖，沒必要全域性都載入百度地圖的檔案 單獨新建一個js檔案：loadBMap.js，名字隨意取，位置可以隨便放 export default function load

vue-cli中使用百度地圖（根據輸入框輸入的內容，獲取詳細地址）

效果圖如下： 1.申請百度地圖金鑰（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular （1）百度地圖開放平臺–開發文件–web開發–JavaScript API–服務介紹–產品簡介–申請金鑰（ak） （2）

vue-baidu-map vue專案中使用百度地圖（搜尋，資訊視窗，獲取地點詳細資訊）

最近做了一個垃圾分類的專案，要求使用百度地圖。主要實現以下幾個功能： 1、點選地圖獲取到經緯度和地點資訊 2、點選地圖實時顯示資訊視窗 3、區域搜尋功能，具體功能就是如下圖 ↓ 兩個api網址，一個vue-baidu-map的api，一個JavaScript的百度

Vue專案實戰引入百度地圖（二）

一、在 http://lbsyun.baidu.com/ 申請 祕鑰 二、在index.html檔案中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4h

Vue專案實戰引入百度地圖（一）

一、在 http://lbsyun.baidu.com/ 申請 祕鑰 二、在index.html檔案中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4h

關於百度地圖（四）：點聚合及只顯示螢幕範圍內的marker

繼續來總結百度地圖。 前面我們將marker傳入了地圖中去，但是，隨著專案的深入，需要在地圖上顯示的marker也越來越多，這個時候就必然會出現一個問題：卡頓！ 那麼百度地圖也為我們提供了“點聚合”來解決這個問題，不過我們還可以設定地圖只顯示螢幕範圍內的ma

android 百度地圖（具體請看百度開放平臺）

int over layout tco pap 平臺 jar pil inter compile files(‘libs/BaiduLBS_Android.jar‘) compile ‘com.android.support:appcompat-v7:26.+‘

百度地圖（多點定位+聚合）

初始化 默認 each 直接 搜索 不能 行政 參數 全部 首先頁面引用必須的兩個JS <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的Key值">

Android百度地圖（二）結合方向傳感器我們自己定位哪裏走

troy 真機 pretty 刪除文件 RR tap 大神 素材 near Android百度地圖（二）結合方向傳感器我們自己定位哪裏走 本文代碼在http://b

android之使用百度地圖（1）

baidu man ports cte public phone sch lis stat Activity_main.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmln

百度地圖生成器添加標註不顯示

圖標 技術 路徑 api 發現 不顯示 HR baidu images 最近發現百度地圖生成器生成的地圖中標註的圖片不顯示，如下圖： 很明顯了，就是這個圖標路徑（http://app.baidu.com/map/images/us_mk_icon.png）的問題 在

vue使用百度地圖

ear key 文件 inf AC ces HR idt return 1.在百度地圖申請密鑰:http://lbsyun.baidu.com/ 將 <script type="text/javascript" src="http://api.map.baidu.c

百度地圖tilesloaded只觸發一次

func view target int .com loaded dde rem http 方法轉自百度地圖論壇@ hx863975383：http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=82409

解決Vue引入百度地圖JSSDK：BMap is undefined 問題

原文連結： 解決Vue引入百度地圖JSSDK：BMap is undefined 問題 百度地圖官網文件介紹使用JSSDK時，僅提供了2種引入方式： script引入 非同步載入 但vue專案中僅某一兩個頁面需要用到百度地圖，所以不想在 index.html 中全域性引用。 那

Android學習筆記之百度地圖（駕車路線搜尋及RouteOverlay步行路線搜尋及RouteOverlay）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

百度地圖（icon，zIndex）

百度地圖v2.0參考http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b2 覆蓋物（Marker） Icon： var myIcon = new BMap.Icon( 　　　　　　　　　　tagicon,//圖片

vue、百度地圖

點選頁面中的位置，跳轉到百度地圖，並且根據經緯度定位到具體位置 開啟   百度地圖開放平臺 | 百度地圖API SDK | 地圖開發   獲取 金鑰ak 頁面中在位置的地方新增一個點選事件 <div class="lxdz_nr" @clic

node 非同步載入百度地圖

export default { init: function (){ const AK = "AFNGWoP3YTGstfhT6BQUcsm5xGodgTIv"; const BMap_URL = "https://api.map.baidu.com/api?v