標籤：ddc window visible api des UI and ack baidu
最近項目需要在網頁中嵌入地圖，於是在這裡記錄下網頁嵌入百度地圖和使用百度地圖api自訂地圖的步驟,需要的朋友也可以參考下
首先進入http://api.map.baidu.com/lbsapi/creatmap/，搜尋自己想要顯示的經緯度，即為定義的中心點座標
其餘的在代碼中有注釋，可以根據自己需要變更
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="百度地圖,百度地圖API" /> <meta name="description" content="百度地圖API自訂地圖" /> <title>百度地圖API自訂地圖</title><!--引用百度地圖API--><style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style><script src="http://api.map.baidu.com/api?key=&v=1.1&services=true" type="text/javascript" charset="utf-8"></script></head><p></p> <body> <!--百度地圖容器--> <div style="width:600px;height:500px;border:#ccc solid 1px;" id="myMap"></div></body><script type="text/javascript">//建立和初始化地圖函數：function initMap(){createMap();//建立地圖setMapEvent();//設定地圖事件addMapControl();//向地圖添加控制項}//建立地圖函數：function createMap(){var map = new BMap.Map("myMap");//在百度地圖容器中建立一個地圖var point = new BMap.Point(104.071387,30.575315);//定義一個中心點座標map.centerAndZoom(point,17);//設定地圖的中心點和座標並將地圖顯示在地圖容器中window.map = map;//將map變數儲存在全域}//地圖事件設定函數：function setMapEvent(){map.enableDragging();//啟用地圖拖拽事件，預設啟用(可不寫)map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小map.enableDoubleClickZoom();//啟用滑鼠雙擊放大，預設啟用(可不寫)map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖}//地圖控制項添加函數：function addMapControl(){//向地圖中添加縮放控制項var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地圖中添加縮圖控制項var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove);//向地圖中添加比例尺控制項var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}initMap();//建立和初始化地圖</script></html>
在自己的網頁中嵌入百度地圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
