Google Map Api v3 自定义info插件 js-info-bubble

Google Map Api v3 自定义info插件 js-info-bubble

简介

js-info-bubble库可创建可自定义的基于CSS3的InfoWindows。它支持标签内容,并使用CSS3进行圆角,阴影和动画。

列子

这里写图片描述

引入Google Map Api JS, InfoBubble

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="../src/infobubble.js></script>

定义map对象以及marker

var mapCenter = new google.maps.LatLng(-35.397, 150.644);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(-35, 150),
          draggable: true
        });

定义info-bubble对象

//info内容定义
var content = "<div><p>自定义</p></div>"

 var infoBubble = new InfoBubble({
                map: map,
                content: content,
                padding: '10px',
                borderColor: "#ccc",
                backgroundColor: "#fff",
                hideCloseButton: true,
                minWidth: 208,
                maxWidth: 208,
                minHeight: 258,
                maxHeight: 258,
                shadowStyle: 0
            });
 infoBubble.open();

##API

以下是常用的方法和事件,希望能帮到大家


方法返回值说明
openNone打开
closeNone关闭
isOpenBool是否打开状态

事件参数说明
openmap, marker打开infoBubble
addTabtitle,content添加tab页
updateTabindex, title, content修改tab页
removeTabindex删除tab页
setShadowStylevalue设置阴影样式
setPaddingvalue设置边距
setBorderRadiusvalue设置边界半径
setBorderWidthvalue设置边界宽
setBorderColorvalue设置边界颜色
setBackgroundColorvalue设置背景颜色
setMaxWidthvalue设置最大宽度
setMaxHeightvalue设置最大高度
setMinWidthvalue设置最小宽度
setMinHeightvalue设置最小高度
setArrowSizevalue设置箭头大小
setArrowPositionvalue设置箭头位置
setArrowStylevalue设置箭头样式
setCloseSrcvalue设置关闭图片

在这里插入图片描述


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

V-BOX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值