百度地图自定义环形菜单

来源:https://www.sucaihuo.com/js/2483.html 2017-07-20 23:30浏览(1571) 收藏

一款百度地图自定义环形菜单的特效,可在地图上设定多个标记点,点击每一个标记点会显示环形图标菜单,点击菜单也有相应的交互:包括弹窗地理位置或跳转链接,可以自由设置环形菜单的交互内容,喜欢的童鞋请收下吧。
百度地图自定义环形菜单
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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: "http://www.sucaihuo.com",
		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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2