網頁引入百度雲地圖之JS篇

本文大致介紹一下怎麼在網頁中引入百度雲地圖，其它更多功能還等着小夥伴去探索

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。

一、去百度雲API官網申請密鑰

百度雲API

二、將密鑰寫到代碼中

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>

三、利用 H5 獲得經緯度座標

	var x=document.getElementById("demo");
	function getLocation(){
        //檢測是否支持地理定位
        if(navigator.geolocation){
          navigator.geolocation.getCurrentPosition(showPosition);          

	     }else{
            x.innerHTML="Geolocation is not supported by this  browser.";         
                  }     
         } 

	//獲得並顯示經度和緯度    
	function showPosition(position){
         x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 

	｝

四、將經緯度座標賦給百度地圖API函數

<script type="text/javascript">
	// 百度地圖API功能
	var map = new BMap.Map("allmap");    // 創建Map實例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地圖,設置中心點座標和地圖級別
	map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
	map.setCurrentCity("北京");          // 設置地圖顯示的城市 此項是必須設置的
	map.enableScrollWheelZoom(true);     //開啓鼠標滾輪縮放
</script>

這樣就可以在網頁中插入一個最基本的地圖了，還有很多其它功能等着你去使用！