1. 程式人生 > >百度地圖-非同步載入地圖

百度地圖-非同步載入地圖

1、問題背景

     百度地圖核心js初始化不引入,在函式中建立script後引入

2、實現原始碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
	body, html,#allmap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin:0;
		font-family:"微軟雅黑";
		font-size: 12px;
		font-size-adjust: none;
		font-style: oblique;
	}
</style>
<title>非同步載入地圖</title>
</head>
<body onload="asyncLoading();">
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	/**
	 * 非同步載入
	 */
	function asyncLoading() 
	{
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "http://api.map.baidu.com/api?v=2.0&ak=ak金鑰&callback=initMap";
		document.body.appendChild(script);
	}
	
	/**
	 * 初始化地圖
	 */
	function initMap() 
	{
		var map = new BMap.Map("allmap");            // 建立Map例項
		map.centerAndZoom(new BMap.Point(114.309531, 30.59619),50);             
		map.enableScrollWheelZoom();                 //啟用滾輪放大縮小
	}  
</script>

3、實現結果


相關推薦

地圖-非同步載入地圖

1、問題背景     百度地圖核心js初始化不引入,在函式中建立script後引入2、實現原始碼<!DOCTYPE html> <html> <head> <m

地圖非同步載入時出現的問題

在使用百度地圖做專案的時候,因為載入js在沒有網路的時候,是非常緩慢的,時間約有20s了,在這期間,頁面一片空白,造成了不好的使用者體驗,所以這裡想到用非同步載入,但是在檢視文件使用程式碼之後,頁面一直不呼叫回撥函式init();最後自己手動呼叫,以下是程式碼 domRead

javaweb中使用、谷歌地圖進行定位

gets .get pos 地圖 click sea over pad peid 第一種 百度 直接上代碼: <!DOCTYPE> <html> <head> <meta name="viewport

iOS應用內跳轉高德蘋果地圖

bool 知識點 coo count value oid bsp lse rec 移動開發經常用到基於位置的一些導航功能,但是對於對導航功能依賴性不強的的應用,我們直接采用應用外跳轉地圖APP即可。 但是應用間跳轉,首先需要設置白名單, 在iOS 9 下涉及到平臺客戶端跳

、高德地圖功能進一步探索之—電子圍欄繪製(三)

開始最前提到對地圖覆蓋物的使用,到目前為止只剩  Polygon(多邊形)  Circle(圓形)這兩個還沒有進一步說明,那麼今天我們所要講解的電子圍欄功能會用到這兩個覆蓋物,當然也會用到Marker覆蓋物 Polyline(折線)一起來實現: 實現思路(多邊形實現):

、騰訊地圖正/逆地址解析 javascript

專案用到正逆地址解析,記錄一下以便再次使用,介面可用於非同步GET請求,script方式,h5頁面,小程式,手機,同時可用於後端服務。 1.百度 逆地址解析(根據經緯度獲取中文地址) 百度文件 - 逆地址解析 介面:http://api.map.baidu.co

ionic1 接入或者高德地圖 移動端不顯示 pc端谷歌瀏覽器正常的問題解決

這個問題困擾了我三天!!! 火大!!!!!! 百度別人,什麼api換成getscript,加scroll='false'...  各種操作,毛用沒有。 看程式碼沒有任何問題,該引入的都引了,js部分try catch 下  移動端報錯 AMap(BMap) is not de

與谷歌地圖瓦片組織方式對比

百度是從中心點經緯度(0,0)度開始計算瓦片,在第1級時百度將世界地圖分為4塊。 中心點右上部分(中國地區)佔1塊。 谷歌是從左上角經緯度(-180,90)度開始計算瓦片,在第1級時谷歌將世界地圖分為1塊。 在第2級時,百度地圖(中心點右上部分)分為

&高德地圖小區景點邊界輪廓實現

經常的我們在使用地圖功能時,會發現在選擇一個小區或者一個熱門景點的時候,地圖上面會給出其邊界輪廓,能夠方便我們知道其範圍大小,有時候在我們使用地圖元件的時候,也會面臨著類似的需求。比如在地圖上面標識出一個商場範圍內的熱力圖,一個熱門景點的遊覽情況等。那麼,我們該如何利用地圖

Android仿,高德地圖位置交換控制元件,水平or垂直交換控制元件位置

  開始看到這個需求,準備使用檢視動畫 TranslateAnimation 來實現。但是把因為檢視動畫只是移動了檢視,控制元件的位置沒有改變,導致只能執行一次交換的動作,不能交換回來。逐放棄改用屬性動畫來實現。直接交換兩個控制元件的位置,交換後在將原來控制元件的值賦予交換後

解決ueditor插入動態地圖空白 支援iframe方法

說明:新版本ueditor要修改 xss過濾白名單  修改配置檔案ueditor.config.js  搜尋:  whitList 增加下面第二行即可 1 2 3 ,whitList:{ iframe: ['frameborder','border','margin

谷歌離線地圖解決方案(離線地圖下載)

離線地圖解決方案,除了買地圖資料,使用專業的ArcGIS來做外,也可以使用GMap.Net來做。 使用了GMap一年了,也有了一些積累,開發了一個可以下載ArcGIS、百度、谷歌、高德、騰訊SOSO、天地圖、Here等地圖的地圖下載器。 百度和google地圖載入顯示如下: 百度普通地圖: 百

Android應用內開啟高德、、騰訊地圖app

     最近在專案中需要地圖導航功能,但是匯入第三方地圖導航包的話,應用打出包後會很大,所以考慮到可以通過呼叫外部地圖應用來解決,參考了微信開啟外部地圖的做法,有了下面的解決辦法:1.主要思路:通過高德、百度、騰訊提供的Uri開啟應用外部地圖app.2.關鍵程式碼(以高德地

ajax區域性重新整理後,如何讓區域性中的分享重新載入

我這個人不怎麼喜歡說太多話,看幾個圖你們就懂了 Ajax前 Ajax之後 原因分析 解決方法 收工 百度分享是集成了眾多主流第三方網站分享和收藏按鈕的工具。 通過百度分享輕鬆將主流第三方網站的分享按鈕全部整合到自己網站上,滿足網站使用者的分享需求,並通過在第三方網站的分享內容和

記錄Vue非同步載入地圖

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

node 非同步載入地圖

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

地圖載入的兩種 方式 直接載入非同步載入

轉自:http://blog.csdn.net/u014470581/article/details/527808811、直接載入 <html><head>    <metahttp-

引用地圖api二次載入地圖錯位

所做的網頁需要有百度地圖的功能。 於是引用了百度地圖,但是在初始化地圖的時候遇到了一個問題。 初始化的地圖中心點不正確。所標記的定位如果是第一次載入的話,定位是正確的。 但如果沒有清快取就進行第二次載入的話,這個定位一開始雖然是在地圖的最中間,但是由於初始定位不正確,一開始標記的定位也不

【 轉】地圖Canvas實現十萬CAD資料秒級載入

Github上看到: https://github.com/lcosmos/map-canvas 這個實現颱風軌跡,這個資料量非常龐大,當時開啟時,看到這麼多資料載入很快,感到有點震驚,然後自己研究了一番,發現作者採用的是Canvas作為百度的自定義覆蓋層。 <!DOCTYPE html&

地圖,經緯度相同的點重複。導致頁面載入緩慢

問題:百度地圖,經緯度相同的點重複。導致頁面載入緩慢 緩慢原因:地圖上的每一個點其實都是一個html節點,載入節點太多,頁面就會卡 解決方法: 第一步:使用百度點聚合 http://lbsyun.baidu.com/jsdemo.htm#c1_4 第二步:使用點聚合後,放大