步驟1：加載百度地圖js框架

<script?src="http://api.map.baidu.com/api?v=1.4"></script>

步驟2：寫(xiě)好地圖容器標(biāo)簽，html代碼如下

<style>
#mapbox{width:99%;height:500px;overflow:hidden;border:1px?solid?#ccc;}
</style>
<div?id="mapbox"></div>

步驟3：js初始化地圖并標(biāo)注，坐標(biāo)點(diǎn)拾取地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

<script>
var?map?=?new?BMap.Map("mapbox");????????????//?創(chuàng)建Map實(shí)例，必須和地圖容器id一致
var?point?=?new?BMap.Point(113.295299,22.722847);?//?創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point,16);?????????????????//?初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別，最大19級(jí)
map.enableScrollWheelZoom();?????????????????//啟用滾輪放大縮小
map.addControl(new?BMap.NavigationControl());
map.addControl(new?BMap.ScaleControl());
map.addControl(new?BMap.OverviewMapControl());
var?marker?=?new?BMap.Marker(point);????????????????????????
map.addOverlay(marker);
var?infoWinOpts?=?{}
var?sitetxt="<div?style='text-align:left;color:#333;line-height:25px;'><li>地址：廣東省中山市南頭鎮(zhèn)金灣廣場(chǎng)B座16號(hào)?</li><li>電話：0760-22517081</li></div>";
var?infoWin?=?new?BMap.InfoWindow(sitetxt,infoWinOpts);
marker.openInfoWindow(infoWin);
marker.addEventListener("click",function(){this.openInfoWindow(infoWin);});//注冊(cè)點(diǎn)擊事件
</script>

效果如下：

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶參考了本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/19364.html