引用一個地圖的網絡路徑

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰1g1fQ88FPyxtTBZakPQzIqPRVf1ZrSEq"></script>

頁面放一個div即可

<div id="ditu">
</div>

頁面加載完成後一個執行一個函數

$(function(){

　　newMap()

})

function newMap(){
//創建地圖實例
var map = new BMap.Map("ditu");
//設置中心點坐標
var point = new BMap.Point(118.051324, 36.797857);
//根據中心點和層級顯示地圖
map.centerAndZoom(point, 15);
//設置顯示城市
map.setCurrentCity("淄博");
//設置滾輪縮放
map.enableScrollWheelZoom();
//禁用雙擊放大
map.disableDoubleClickZoom();
addMarker(map);
}
/*功能：雙擊時添加一個標註*/
function addMarker(map){
//定義一個數組，保存點擊的點的經緯度
var pointArr = [];
map.addEventListener("dblclick",function(e){
//獲取當前點擊點的經緯度，在此位置添加標註
var nowPoint = new BMap.Point(parseFloat(e.point.lng),parseFloat(e.point.lat));
//console.log(nowPoint);
//將本次點擊的經緯度追加進數組
pointArr.push(nowPoint);
//console.log(pointArr);
//設置標註圖標
var myIcon = new BMap.Icon("../../resouse/img/10.dingweishen/8.png",new BMap.Size(36, 36),{anchor: new BMap.Size(10, 35)});
//創建標註
var marker = new BMap.Marker(nowPoint,{icon:myIcon});
//將標註添加到地圖中
map.addOverlay(marker);
//設置標註信息及文本
var opts = {
width : 150, // 信息窗口寬度
height: 60, // 信息窗口高度
title : "海底撈王府井店" , // 信息窗口標題
enableMessage:true,//設置允許信息窗發送短息
message:"親耐滴，晚上一起吃個飯吧？戳下面的鏈接看下地址喔~"
};
var infoWindow = new BMap.InfoWindow("地址：北京市東城區王府井大街88號樂天銀泰百貨八層", opts); // 創建信息窗口對象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,nowPoint); //開啟信息窗口
});
//設置的標註點可以拖拽
//marker.enableDragging();
//根據點顯示折線:pointArr--點的數組。折線的顏色，折線的寬度，折線的透明度
var polyline = new BMap.Polyline(pointArr,{strokeColor:"black", strokeWeight:2, strokeOpacity:0.5});
//將點連成線
map.addOverlay(polyline);
});
}

百度地圖，創建標點