<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

<div id="map" class="map"></div>

// 百度地圖API功能
var map = new BMap.Map("map"); // 創(chuàng)建Map實(shí)例
map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
//添加地圖類型控件
map.addControl(
   new BMap.MapTypeControl({
     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
   })
);
map.setCurrentCity("成都"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
map.enableScrollWheelZoom(true);

let point = new BMap.Point(104.07258, 30.550501);
// 創(chuàng)建點(diǎn)標(biāo)記
var marker = new BMap.Marker(point);
// 在地圖上添加點(diǎn)標(biāo)記
map.addOverlay(marker);
// 創(chuàng)建信息窗口
var opts = {
  width: 200,
  height: 100,
  title: "彈窗標(biāo)題",
};
var infoWindow = new BMap.InfoWindow(
  "彈窗內(nèi)容",
  opts
);
// 點(diǎn)標(biāo)記添加點(diǎn)擊事件
marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // 開啟信息窗口
});

//設(shè)置文本標(biāo)記
var opts2 = {
  position: point, // 指定文本標(biāo)注所在的地理位置
  offset: new BMap.Size(30, -30), // 設(shè)置文本偏移量
};
// 創(chuàng)建文本標(biāo)注對(duì)象
var label = new BMap.Label("成都書論技術(shù)有限公司", opts2);
// 自定義文本標(biāo)注樣式
label.setStyle({
  color: "blue",
  borderRadius: "5px",
  borderColor: "#ccc",
  padding: "10px",
  fontSize: "16px",
  height: "50px",
  lineHeight: "30px",
  fontFamily: "微軟雅黑",
});
map.addOverlay(label);