一、百度地圖

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）纔可使用，接口（除發送短信功能外）無使用次數限制。

二、步驟

（1）登錄百度賬號

（2）創建應用

1、應用類型選擇瀏覽器端。

2、JavaScript API 選項要進行勾選。

3、測試時，可以在白名單中直接書寫一個星號即可（*）。

（3）獲取密匙AK

（4）獲取JavaScript API服務方法

//參數v表示您加載API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。

http://api.map.baidu.com/api?v=1.4

//使用JavaScript APIv2.0請先申請密鑰ak，按此方式引用。

http://api.map.baidu.com/api?v=2.0&ak=您的密鑰

（5）使用

<!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 type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=yourAk=1"></script>
	<script src="./js/global.js"></script>
	<script src="./js/vue.min.js"></script>
	<link rel="stylesheet" href="./css/styles.css">
	<title>地址解析</title>
</head>
<body>
	<div id="app" v-cloak>
			<header class="topbar">
					<span class="fl" onClick="javascript:history.go(-1)">
						<img src="images/head_ic_back.png">
					</span>
					<!-- H3-手動輸入 -->
					<h2 class="mapTitle">{{address}}</h2>

				</header>
				<div class="h88"></div>
	</div>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	
	new Vue({
            mounted(){
            	if(getUrlParam("address") != null && typeof(getUrlParam("address")) != "undefined"){
            		this.address = getUrlParam("address");
                }
         		// this.address = "廣州市 天河區 棠安路自編188號";//暫時寫死
				this.getMap();
				// 重寫alert去掉網址
				window.alert = function(name){
				var iframe = document.createElement("IFRAME");
				iframe.style.display="none";
				iframe.setAttribute("src", 'data:text/plain,');
				document.documentElement.appendChild(iframe);
				window.frames[0].window.alert(name);
				iframe.parentNode.removeChild(iframe);
				}
            },
            el:"#app",
            data: { 
				language:language,
				address:'',
            },
            methods:{  
            	getMap(){
					// 百度地圖API功能
					var map = new BMap.Map("allmap");
					var point = new BMap.Point(116.331398,39.897445);
					map.centerAndZoom(point,12);
					// map.addControl(new BMap.NavigationControl());
					map.enableScrollWheelZoom();   //啓用滾輪放大縮小，默認禁用
					map.enableContinuousZoom();    //啓用地圖慣性拖拽，默認禁用
					map.addControl(new BMap.NavigationControl());    
					map.addControl(new BMap.ScaleControl());    
					map.addControl(new BMap.OverviewMapControl());    
					// 創建地址解析器實例
					var myGeo = new BMap.Geocoder();
					// 將地址解析結果顯示在地圖上,並調整地圖視野
					myGeo.getPoint(this.address, function(point){
						if (point) {
							map.centerAndZoom(point, 16);
							map.addOverlay(new BMap.Marker(point));
						}else{
							alert("地址無效");
						}
					});
            	},
            	
            }
        });
</script>

三、關於百度地圖 HTTPS 的說明

JavaScript API首家支持Https，已全面開放，無需申請Https服務可直接使用。

//如果使用JavaScript API ，需要加一個特殊字段 (s=1)：

https://api.map.baidu.com/api?v=2.0&ak=你的密鑰&s=1；

//對於Web API 無需加特殊字段，直接使用 HTTPS協議訪問即可，如Geocoding：

https://api.map.baidu.com/geocoder/v2/?ak=你的祕鑰&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1