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

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

步驟2：寫好地圖容器標簽，html代碼如下

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

步驟3：js初始化地圖并標注，坐標點拾取地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

<script>
var?map?=?new?BMap.Map("mapbox");????????????//?創建Map實例，必須和地圖容器id一致
var?point?=?new?BMap.Point(113.295299,22.722847);?//?創建點坐標
map.centerAndZoom(point,16);?????????????????//?初始化地圖,設置中心點坐標和地圖級別，最大19級
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>地址：廣東省中山市南頭鎮金灣廣場B座16號?</li><li>電話：0760-22517081</li></div>";
var?infoWin?=?new?BMap.InfoWindow(sitetxt,infoWinOpts);
marker.openInfoWindow(infoWin);
marker.addEventListener("click",function(){this.openInfoWindow(infoWin);});//注冊點擊事件
</script>

效果如下：

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶參考了本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/19364.html