網頁中嵌入百度地圖程式碼例項

antzone發表於2018-05-22
網頁地圖

分享一段程式碼例項，它實現了再網頁中嵌入百度地圖的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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"></script>
</head>
<body>
<!--百度地圖容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
<script type="text/javascript">
//建立和初始化地圖函式：
function initMap() {
  createMap(); //建立地圖
  setMapEvent(); //設定地圖事件
  addMapControl(); //向地圖新增控制元件
}
 
//建立地圖函式：
function createMap() {
  var map = new BMap.Map("dituContent"); //在百度地圖容器中建立一個地圖
  var point = new BMap.Point(116.395645, 39.929986); //定義一箇中心點座標
  map.centerAndZoom(point, 12); //設定地圖的中心點和座標並將地圖顯示在地圖容器中
  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>
</body>
</html>

相關文章