一款百度地图自定义环形菜单的特效,可在地图上设定多个标记点,点击每一个标记点会显示环形图标菜单,点击菜单也有相应的交互:包括弹窗地理位置或跳转链接,可以自由设置环形菜单的交互内容,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791