主頁(yè) > 知識(shí)庫(kù) > 網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)步驟

網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)步驟

熱門標(biāo)簽:經(jīng)綸電銷機(jī)器人 鄒城智能外呼系統(tǒng) 個(gè)貸電銷機(jī)器人 電話機(jī)器人宣傳片 外呼智能系統(tǒng)報(bào)價(jià) 騰訊植物園地圖標(biāo)注 浦東新區(qū)百度地圖標(biāo)注圖片 華為收費(fèi)站地圖標(biāo)注 巫山縣地圖標(biāo)注app

在網(wǎng)頁(yè)中插入百度地圖

如果想在自己的網(wǎng)頁(yè)上面加入百度地圖的話,可以用百度地圖的api.具體使用方法如下:

第一步:進(jìn)入百度創(chuàng)建地圖的網(wǎng)站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下圖所示。

第二步:設(shè)置地圖,大家可以對(duì)網(wǎng)站顯示地圖的寬高進(jìn)行設(shè)置,其余選項(xiàng)不動(dòng)。

第三步:添加標(biāo)注。點(diǎn)擊第一個(gè)圖標(biāo)后,在右側(cè)找到自己的位置,單擊鼠標(biāo)左鍵可定位。標(biāo)記圖標(biāo)處可更換圖標(biāo)形狀,名稱和備注填入位置相關(guān)信息。

第四步:獲取代碼。將代碼貼到你的網(wǎng)頁(yè)里就OK了。代碼如下:


復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
<html xmlns="<a >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地圖,百度地圖API,百度地圖自定義工具,百度地圖所見(jiàn)即所得工具" />
<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 type="text/javascript" src="<a ></script</a>>
</head></p> <p><body>
<!--百度地圖容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//創(chuàng)建和初始化地圖函數(shù):
function initMap(){
createMap();//創(chuàng)建地圖
setMapEvent();//設(shè)置地圖事件
addMapControl();//向地圖添加控件
}

//創(chuàng)建地圖函數(shù):
function createMap(){
var map = new BMap.Map("dituContent");//在百度地圖容器中創(chuàng)建一個(gè)地圖
var point = new BMap.Point(113.116257,27.822879);//定義一個(gè)中心點(diǎn)坐標(biāo)
map.centerAndZoom(point,17);//設(shè)定地圖的中心點(diǎn)和坐標(biāo)并將地圖顯示在地圖容器中
window.map = map;//將map變量存儲(chǔ)在全局
}

//地圖事件設(shè)置函數(shù):
function setMapEvent(){
map.enableDragging();//啟用地圖拖拽事件,默認(rèn)啟用(可不寫)
map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大,默認(rèn)啟用(可不寫)
map.enableKeyboard();//啟用鍵盤上下左右鍵移動(dòng)地圖
}

//地圖控件添加函數(shù):
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();//創(chuàng)建和初始化地圖
</script>
</html>

標(biāo)簽:那曲 滁州 南平 日喀則 廣西 唐山 楊凌 三沙

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)步驟》,本文關(guān)鍵詞  網(wǎng)頁(yè),嵌入,百度,地圖,和,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)步驟》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)步驟的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章