目标：在百度地图上展示校区的名称，地址，增加信息窗口，信息窗口增加两个按钮，按钮可以点击可以实现交互
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>思润教育小寨校区</title>
<style type="text/css">
html,body,#allmap{height:100%; margin:0;font-family:"微软雅黑";}
#btnContainer {
margin-top: 10px;
}
button {
margin-right: 10px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("allmap");
//默认启用滚轮放大缩小
map.enableScrollWheelZoom();
// 创建坐标点对象
var point = new BMap.Point(108.94716, 34.222307);
// 添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 设定中心点和缩放级别
map.centerAndZoom(point, 18);
// 创建信息窗口
var content = `<div style="font-size:14px;">思润教育小寨校区<br/>地址：西安市雁塔区小寨国贸中心22层<br/><div id="btnContainer"><button onclick="sendPhone()">发送手机</button><button onclick="openChat()">在线咨询</button></div></div>`;
var infoWindow = new BMap.InfoWindow(content,{enableMessage: false});
// 绑定点击事件，打开信息窗口
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
// 打开信息窗口
marker.openInfoWindow(infoWindow);
// 发送手机
function sendPhone() {
alert('发送手机');
}
// 在线咨询
function openChat() {
alert('在线咨询');
}
</script>
</body>
</html># 默认启用滚轮放大缩小
map.enableScrollWheelZoom();