页面的head部分，先设置好页面元素的样式，代码如下：

接着调用百度地图的API，引入jQuery库和本地JS文件，代码如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
<script type="text/javascript" src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.mapPieMenu.min.js"></script>

页面的body部分，先设置好地图的容器，代码如下：

<div class="wrap">
	<div id="container1" class="container"></div>
	<div id="container2" class="container"></div>
	<div id="container3" class="container"></div>
</div>

接着定义各标记点的参数和交互内容，代码如下：

<script type="text/javascript">
var centerPoint = {
	lng: 116.405562,
	lat: 39.907851
};
var icon = {
	url: "img/marker.png",
	width: 32,
	height: 32
};
var points = [{
		lng: 116.415372,
		lat: 39.917619
	},
	{
		lng: 116.395681,
		lat: 39.898635
	},
	{
		lng: 116.38253,
		lat: 39.908709
	},
	{
		lng: 116.429709,
		lat: 39.910176
	},
	{
		lng: 116.414509,
		lat: 39.902676,
		isOpen: true
	},
	{
		lng: 116.392842,
		lat: 39.919141
	}
];
var menus = [{
		id: 1,
		icon: "img/1.png",
		title: "目标",
		href: "https://jy.tp.yuanmeng.life/",
		target:"_blank",
		cb: callback
	},
	{
		id: 2,
		icon: "img/2.png",
		title: "购物车",
		cb: callback
	},
	{
		id: 3,
		icon: "img/3.png",
		title: "主页",
		cb: callback
	},
	{
		id: 4,
		icon: "img/4.png",
		title: "VIP",
		cb: callback
	},
	{
		id: 5,
		icon: "img/5.png",
		title: "钱包",
		cb: callback
	},
	{
		id: 6,
		icon: "img/6.png",
		title: "安全中心",
		cb: callback
	}
];

// 回调函数
function callback(ele, data){
	alert("序号：" + data.id + "，经度：" + data.point.lng + "，纬度：" + data.point.lat);
}

// 实例化
new MapPieMenu({
	id: "container1",
	centerPoint: centerPoint,
	points: points,
	menus: menus
});
new MapPieMenu({
	id: "container2",
	centerPoint: centerPoint,
	points: points,
	menus: menus,
	type: "circle",
	radius: 100,
	width: 36,
	icon: icon,
	close: false,
	Maptype:  ["地图", "卫星"],
	border: "2px dashed green",
});
new MapPieMenu({
	id: "container3",
	centerPoint: centerPoint,
	points: points,
	menus: menus,
	type: "semicircle",
	radius: 90,
	width: 32,
	icon: icon,
	zoom: true,
	close: false,
	Maptype:  ["地图", "卫星", "三维"],
	border: "2px dashed blue",
});
</script>